<!DOCTYPE html>
<html>
<head>
  <!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

<link rel="image_src" type="image/jpeg" href="/images/logo.png" />

<!-- Site Properities -->
<meta name="generator" content="DocPad v6.79.4" />
<title>Icon | Semantic UI</title>

<meta name="description" content="An icon is a glyph used to represent something else" />
<meta name="keywords" content="html5, ui, library, framework, javascript" />
  
  <script src="/javascript/library/detect.min.js"></script>
  <script src="/javascript/library/jquery.min.js"></script>
  <script src="/javascript/library/clipboard.min.js"></script>
  <script src="/javascript/library/cookie.min.js"></script>
  <script src="/javascript/library/easing.min.js"></script>
  <script src="/javascript/library/highlight.min.js"></script>
  <script src="/javascript/library/history.min.js"></script>
  <script src="/javascript/library/state.js"></script>
  <script src="/javascript/library/tablesort.min.js"></script>
  <script src="/javascript/library/underscore.min.js"></script>





<script src="/dist/semantic.min.js"></script>



<script src="/javascript/docs.js"></script>

  
<link rel="stylesheet" type="text/css" class="ui" href="/dist/semantic.min.css">




<link rel="stylesheet" type="text/css" href="/stylesheets/docs.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/rtl.css">





  
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-44039803-2', 'auto');
  ga('send', 'pageview');
</script>

  
<script type="text/javascript">
  window.liveSettings = {
    api_key    : '9ede3015b9f84c1aabc81ab839c55d74',
    parse_attr : [
      'data-title',
      'data-content'
    ],
    detectlang   : false,
    autocollect  : true,
    ignore_tags  : ['i', 'code', 'pre'],
    parse_attr   : ['data-title', 'data-content', 'data-text'],
    ignore_class : ['code', 'anchor']
  };
</script>
<script type="text/javascript" src="//cdn.transifex.com/live.js"></script>


</head>
<body id="example" class="icon" ontouchstart="">
  
  <div class="ui vertical inverted sidebar menu" id="toc">
  








<div class="item">
  <a class="ui logo icon image" href="/">
    <img src="/images/logo.png">
  </a>
  <a href="/"><b>UI Docs</b></a>
</div>
<a class="item" href="/introduction/getting-started.html">
  <b>Getting Started</b>
</a>
<a class="item" href="/introduction/new.html">
  <b>New in 2.4</b>
</a>
<div class="item">
  <div class="header">Introduction</div>
  <div class="menu">
    
      <a class="item" href="/introduction/integrations.html">
        Integrations
      </a>
    
      <a class="item" href="/introduction/build-tools.html">
        Build Tools
      </a>
    
      <a class="item" href="/introduction/advanced-usage.html">
        Recipes
      </a>
    
      <a class="item" href="/introduction/glossary.html">
        Glossary
      </a>
    
  </div>
</div>
<div class="item">
  <div class="header">Usage</div>
  <div class="menu">
    
      <a class="item" href="/usage/theming.html">
        Theming
      </a>
    
      <a class="item" href="/usage/layout.html">
        Layouts
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Globals</div>
  <div class="menu">
    
      <a class="item" href="/globals/reset.html">
        Reset
        
      </a>
    
      <a class="item" href="/globals/site.html">
        Site
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class="active  header">Elements</div>
  <div class="menu">
    
      <a class="item" href="/elements/button.html">
        Button
        
      </a>
    
      <a class="item" href="/elements/container.html">
        Container
        
      </a>
    
      <a class="item" href="/elements/divider.html">
        Divider
        
      </a>
    
      <a class="item" href="/elements/flag.html">
        Flag
        
      </a>
    
      <a class="item" href="/elements/header.html">
        Header
        
      </a>
    
      <a class="active item" href="/elements/icon.html">
        Icon
        
      </a>
    
      <a class="item" href="/elements/image.html">
        Image
        
      </a>
    
      <a class="item" href="/elements/input.html">
        Input
        
      </a>
    
      <a class="item" href="/elements/label.html">
        Label
        
      </a>
    
      <a class="item" href="/elements/list.html">
        List
        
      </a>
    
      <a class="item" href="/elements/loader.html">
        Loader
        
      </a>
    
      <a class="item" href="/elements/placeholder.html">
        Placeholder
        
      </a>
    
      <a class="item" href="/elements/rail.html">
        Rail
        
      </a>
    
      <a class="item" href="/elements/reveal.html">
        Reveal
        
      </a>
    
      <a class="item" href="/elements/segment.html">
        Segment
        
      </a>
    
      <a class="item" href="/elements/step.html">
        Step
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Collections</div>
  <div class="menu">
    
      <a class="item" href="/collections/breadcrumb.html">
        Breadcrumb
        
      </a>
    
      <a class="item" href="/collections/form.html">
        Form
        
      </a>
    
      <a class="item" href="/collections/grid.html">
        Grid
        
      </a>
    
      <a class="item" href="/collections/menu.html">
        Menu
        
      </a>
    
      <a class="item" href="/collections/message.html">
        Message
        
      </a>
    
      <a class="item" href="/collections/table.html">
        Table
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Views</div>
  <div class="menu">
    
      <a class="item" href="/views/advertisement.html">
        Advertisement
        
      </a>
    
      <a class="item" href="/views/card.html">
        Card
        
      </a>
    
      <a class="item" href="/views/comment.html">
        Comment
        
      </a>
    
      <a class="item" href="/views/feed.html">
        Feed
        
      </a>
    
      <a class="item" href="/views/item.html">
        Item
        
      </a>
    
      <a class="item" href="/views/statistic.html">
        Statistic
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Modules</div>
  <div class="menu">
    
      <a class="item" href="/modules/accordion.html">
        Accordion
        
      </a>
  
      <a class="item" href="/modules/checkbox.html">
        Checkbox
        
      </a>
  
      <a class="item" href="/modules/dimmer.html">
        Dimmer
        
      </a>
  
      <a class="item" href="/modules/dropdown.html">
        Dropdown
        
      </a>
  
      <a class="item" href="/modules/embed.html">
        Embed
        
      </a>
  
      <a class="item" href="/modules/modal.html">
        Modal
        
      </a>
  
      <a class="item" href="/modules/popup.html">
        Popup
        
      </a>
  
      <a class="item" href="/modules/progress.html">
        Progress
        
      </a>
  
      <a class="item" href="/modules/rating.html">
        Rating
        
      </a>
  
      <a class="item" href="/modules/search.html">
        Search
        
      </a>
  
      <a class="item" href="/modules/shape.html">
        Shape
        
      </a>
  
      <a class="item" href="/modules/sidebar.html">
        Sidebar
        
      </a>
  
      <a class="item" href="/modules/sticky.html">
        Sticky
        
      </a>
  
      <a class="item" href="/modules/tab.html">
        Tab
        
      </a>
  
      <a class="item" href="/modules/transition.html">
        Transition
        
      </a>
  
  </div>
</div>
<div class="item">
  <div class=" header">Behaviors</div>
  <div class="menu">
    
      <a class="item" href="/behaviors/api.html">
        API
        
      </a>
    
      <a class="item" href="/behaviors/form.html">
        Form Validation
        
      </a>
    
      <a class="item" href="/behaviors/visibility.html">
        Visibility
        
      </a>
    
  </div>
</div>

</div>

<div class="ui black big launch right attached fixed button">
  <i class="content icon"></i>
  <span class="text">Menu</span>
</div>
  




<div class="ui fixed inverted main menu">
  <div class="ui container">
    <a class="launch icon item">
      <i class="content icon"></i>
    </a>
    
      <div class="item">
        Icon
      </div>
    
    <div class="right menu">
      
      <div class="vertically fitted borderless item">
        <iframe class="github" src="//ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
      </div>
      
      <!--
      <div class="item">
        <div class="ui hidden right aligned search input" id="search">
          <div class="ui transparent icon input">
            <input class="prompt" type="text" placeholder="Search...">
            <i class="inverted search link icon" data-content="Search UI"></i>
          </div>
          <div class="results"></div>
        </div>
      </div>
      -->
    </div>
  </div>
</div>

  <div class="pusher">
    <div class="full height">
      <div class="toc">
        <div class="ui vertical inverted menu">
          








<div class="item">
  <a class="ui logo icon image" href="/">
    <img src="/images/logo.png">
  </a>
  <a href="/"><b>UI Docs</b></a>
</div>
<a class="item" href="/introduction/getting-started.html">
  <b>Getting Started</b>
</a>
<a class="item" href="/introduction/new.html">
  <b>New in 2.4</b>
</a>
<div class="item">
  <div class="header">Introduction</div>
  <div class="menu">
    
      <a class="item" href="/introduction/integrations.html">
        Integrations
      </a>
    
      <a class="item" href="/introduction/build-tools.html">
        Build Tools
      </a>
    
      <a class="item" href="/introduction/advanced-usage.html">
        Recipes
      </a>
    
      <a class="item" href="/introduction/glossary.html">
        Glossary
      </a>
    
  </div>
</div>
<div class="item">
  <div class="header">Usage</div>
  <div class="menu">
    
      <a class="item" href="/usage/theming.html">
        Theming
      </a>
    
      <a class="item" href="/usage/layout.html">
        Layouts
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Globals</div>
  <div class="menu">
    
      <a class="item" href="/globals/reset.html">
        Reset
        
      </a>
    
      <a class="item" href="/globals/site.html">
        Site
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class="active  header">Elements</div>
  <div class="menu">
    
      <a class="item" href="/elements/button.html">
        Button
        
      </a>
    
      <a class="item" href="/elements/container.html">
        Container
        
      </a>
    
      <a class="item" href="/elements/divider.html">
        Divider
        
      </a>
    
      <a class="item" href="/elements/flag.html">
        Flag
        
      </a>
    
      <a class="item" href="/elements/header.html">
        Header
        
      </a>
    
      <a class="active item" href="/elements/icon.html">
        Icon
        
      </a>
    
      <a class="item" href="/elements/image.html">
        Image
        
      </a>
    
      <a class="item" href="/elements/input.html">
        Input
        
      </a>
    
      <a class="item" href="/elements/label.html">
        Label
        
      </a>
    
      <a class="item" href="/elements/list.html">
        List
        
      </a>
    
      <a class="item" href="/elements/loader.html">
        Loader
        
      </a>
    
      <a class="item" href="/elements/placeholder.html">
        Placeholder
        
      </a>
    
      <a class="item" href="/elements/rail.html">
        Rail
        
      </a>
    
      <a class="item" href="/elements/reveal.html">
        Reveal
        
      </a>
    
      <a class="item" href="/elements/segment.html">
        Segment
        
      </a>
    
      <a class="item" href="/elements/step.html">
        Step
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Collections</div>
  <div class="menu">
    
      <a class="item" href="/collections/breadcrumb.html">
        Breadcrumb
        
      </a>
    
      <a class="item" href="/collections/form.html">
        Form
        
      </a>
    
      <a class="item" href="/collections/grid.html">
        Grid
        
      </a>
    
      <a class="item" href="/collections/menu.html">
        Menu
        
      </a>
    
      <a class="item" href="/collections/message.html">
        Message
        
      </a>
    
      <a class="item" href="/collections/table.html">
        Table
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Views</div>
  <div class="menu">
    
      <a class="item" href="/views/advertisement.html">
        Advertisement
        
      </a>
    
      <a class="item" href="/views/card.html">
        Card
        
      </a>
    
      <a class="item" href="/views/comment.html">
        Comment
        
      </a>
    
      <a class="item" href="/views/feed.html">
        Feed
        
      </a>
    
      <a class="item" href="/views/item.html">
        Item
        
      </a>
    
      <a class="item" href="/views/statistic.html">
        Statistic
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Modules</div>
  <div class="menu">
    
      <a class="item" href="/modules/accordion.html">
        Accordion
        
      </a>
  
      <a class="item" href="/modules/checkbox.html">
        Checkbox
        
      </a>
  
      <a class="item" href="/modules/dimmer.html">
        Dimmer
        
      </a>
  
      <a class="item" href="/modules/dropdown.html">
        Dropdown
        
      </a>
  
      <a class="item" href="/modules/embed.html">
        Embed
        
      </a>
  
      <a class="item" href="/modules/modal.html">
        Modal
        
      </a>
  
      <a class="item" href="/modules/popup.html">
        Popup
        
      </a>
  
      <a class="item" href="/modules/progress.html">
        Progress
        
      </a>
  
      <a class="item" href="/modules/rating.html">
        Rating
        
      </a>
  
      <a class="item" href="/modules/search.html">
        Search
        
      </a>
  
      <a class="item" href="/modules/shape.html">
        Shape
        
      </a>
  
      <a class="item" href="/modules/sidebar.html">
        Sidebar
        
      </a>
  
      <a class="item" href="/modules/sticky.html">
        Sticky
        
      </a>
  
      <a class="item" href="/modules/tab.html">
        Tab
        
      </a>
  
      <a class="item" href="/modules/transition.html">
        Transition
        
      </a>
  
  </div>
</div>
<div class="item">
  <div class=" header">Behaviors</div>
  <div class="menu">
    
      <a class="item" href="/behaviors/api.html">
        API
        
      </a>
    
      <a class="item" href="/behaviors/form.html">
        Form Validation
        
      </a>
    
      <a class="item" href="/behaviors/visibility.html">
        Visibility
        
      </a>
    
  </div>
</div>

        </div>
      </div>
      <div class="article">
        

<div class="ui masthead vertical tab segment">
  <div class="ui container">
    <div class="introduction">

      <h1 class="ui header">
        Icon
        
        <div class="sub header">
          
          <a class="twitter-share-button twitter"
            href="http://twitter.com/share"
            data-text="Semantic UI is a next generation UI framework"
            data-url="http://semantic-ui.com"
            data-via="semanticui">
          </a>
          <script type="text/javascript">
          window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return}js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,"script","twitter-wjs"));
          </script>
          <iframe class="github" src="//ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
          
          An icon is a glyph used to represent something else
        </div>
      </h1>

      <div class="ui hidden divider"></div>

      <div class="ui right floated main menu">
        <a class="bug popup icon item" data-content="Edit This Page" href="https://github.com/Semantic-Org/Semantic-UI-Docs/edit/master/server/documents/elements/icon.html.eco">
          <i class="edit icon"></i>
        </a>
        
        <a class="bug popup icon item" data-content="Submit Bug Report" href="https://github.com/Semantic-Org/Semantic-UI/issues/new?title=[Icon] - Your Bug Name&body=**Steps to Reproduce**%0A1. Do something%0A2. Do something else.%0A3. Do one last thing.%0A%0A**Expected**%0AThe Icon should do this%0A%0A**Result**%0AThe Icon does not do this%0A%0A**Testcase**%0A(fork this to get started)%0Ahttp://jsfiddle.net/rduvhn8u/1/">
          <i class="bug icon"></i>
        </a>
        
        <a class="github popup icon item" data-content="View project on GitHub" href="https://github.com/Semantic-Org/Semantic-UI">
          <i class="alternate github icon"></i>
        </a>
      </div>
      <div class="ui right floated main menu">
        <a class="music popup icon item" data-content="Play Music">
          <i class="music icon"></i>
        </a>
        <div class="ui language dropdown right floating icon item" id="languages" data-content="Select Language">
          <i class="world icon"></i>
          <div class="menu">
            <div class="header">Select Language</div>
            <div class="ui icon search input">
              <i class="search icon"></i>
              <input type="text" placeholder="Search languages...">
            </div>
            <div class="scrolling menu">
  <div class="item" data-percent="100" data-value="en" data-english="English">
    <span class="description">English</span>
    English
  </div>
  <div class="item" data-percent="94" data-value="da" data-english="Danish">
    <span class="description">dansk</span>
    Danish
  </div>
  <div class="item" data-percent="94" data-value="es" data-english="Spanish">
    <span class="description">Español</span>
    Spanish
  </div>
  <div class="item" data-percent="34" data-value="zh" data-english="Chinese">
    <span class="description">简体中文</span>
    Chinese
  </div>
  <div class="item" data-percent="54" data-value="zh_TW" data-english="Chinese (Taiwan)">
    <span class="description">中文 (臺灣)</span>
    Chinese (Taiwan)
  </div>
  <div class="item" data-percent="79" data-value="fa" data-english="Persian">
    <span class="description">پارسی</span>
    Persian
  </div>
  <div class="item" data-percent="41" data-value="fr" data-english="French">
    <span class="description">Français</span>
    French
  </div>
  <div class="item" data-percent="37" data-value="el" data-english="Greek">
    <span class="description">ελληνικά</span>
    Greek
  </div>
  <div class="item" data-percent="37" data-value="ru" data-english="Russian">
    <span class="description">Русский</span>
    Russian
  </div>
  <div class="item" data-percent="36" data-value="de" data-english="German">
    <span class="description">Deutsch</span>
    German
  </div>
  <div class="item" data-percent="23" data-value="it" data-english="Italian">
    <span class="description">Italiano</span>
    Italian
  </div>
  <div class="item" data-percent="21" data-value="nl" data-english="Dutch">
    <span class="description">Nederlands</span>
    Dutch
  </div>
  <div class="item" data-percent="19" data-value="pt_BR" data-english="Portuguese">
    <span class="description">Português(BR)</span>
    Portuguese
  </div>
  <div class="item" data-percent="17" data-value="id" data-english="Indonesian">
    <span class="description">Indonesian</span>
    Indonesian
  </div>
  <div class="item" data-percent="12" data-value="lt" data-english="Lithuanian">
    <span class="description">Lietuvių</span>
    Lithuanian
  </div>
  <div class="item" data-percent="11" data-value="tr" data-english="Turkish">
    <span class="description">Türkçe</span>
    Turkish
  </div>
  <div class="item" data-percent="10" data-value="kr" data-english="Korean">
    <span class="description">한국어</span>
    Korean
  </div>
  <div class="item" data-percent="7"  data-value="ar" data-english="Arabic">
    <span class="description">العربية</span>
    Arabic
  </div>
  <div class="item" data-percent="6"  data-value="hu" data-english="Hungarian">
    <span class="description">Magyar</span>
    Hungarian
  </div>
  <div class="item" data-percent="6"  data-value="vi" data-english="Vietnamese">
    <span class="description">tiếng Việt</span>
    Vietnamese
  </div>
  <div class="item" data-percent="5"  data-value="sv" data-english="Swedish">
    <span class="description">svenska</span>
    Swedish
  </div>
  <div class="item" data-precent="4"  data-value="pl" data-english="Polish">
    <span class="description">polski</span>
    Polish
  </div>
  <div class="item" data-percent="6"  data-value="ja" data-english="Japanese">
    <span class="description">日本語</span>
    Japanese
  </div>
  <div class="item" data-percent="0"  data-value="ro" data-english="Romanian">
    <span class="description">românește</span>
    Romanian
  </div>
</div>

          </div>
        </div>
      </div>

      
      
      
      <div class="ui download primary button">
        Download
      </div>
      <div class="ui flowing download basic popup">
        <div class="ui divided equal width relaxed center aligned choice grid">
          <div class="framework column">
            <h4 class="ui center aligned header">UI Framework</h4>
            <div class="ui list">
              <div class="item"><i class="green check icon"></i> Themable</div>
              <div class="item"><i class="green check icon"></i> Build Tools</div>
            </div>
            <div class="ui primary fluid button">Choose</div>
          </div>
          <div class="standalone column">
            <h4 class="ui center aligned header">Standalone</h4>
            <div class="ui list">
              <div class="item">Default Theme</div>
              <div class="item">Precompiled</div>
            </div>
            <div class="ui fluid button basic">Choose</div>
          </div>
        </div>
        <div class="ui divided equal height relaxed center aligned framework grid">
          <div class="column">
            <div class="ui header">Semantic UI</div>
            <a class="ui primary button" href="https://github.com/Semantic-Org/Semantic-UI/archive/master.zip">
              Download ZIP
            </a>
            <a class="ui button" href="/introduction/getting-started.html">Getting Started</a>
            <h4 class="ui header">Package Managers</h4>
            <div class="ui form">
              <div class="field">
                <label>NPM</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="npm install semantic-ui">
                </div>
              </div>
              <div class="field">
                <label>Git</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="https://github.com/Semantic-Org/Semantic-UI.git">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="ui divided equal height relaxed center aligned standalone grid">
          <div class="column">
            <div class="ui header">Standalone Icon</div>
            <a class="ui primary button" href="https://github.com/Semantic-Org/UI-Icon/archive/master.zip">
              Download ZIP
            </a>
            <a class="ui button" href="https://github.com/Semantic-Org/UI-Icon/">
              View GitHub
            </a>
            <h4 class="ui header">Package Managers</h4>
            <div class="ui form">
              <div class="field">
                <label>Bower</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="bower install semantic-ui-icon">
                </div>
              </div>
              <div class="field">
                <label>NPM</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="npm install semantic-ui-icon">
                </div>
              </div>
              <div class="field">
                <label>Git</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="https://github.com/Semantic-Org/UI-Icon.git">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
    <div class="advertisement">
      
      <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=semanticuicom" id="_carbonads_js"></script>
      
    </div>
    
    
    
    
    
      
        
      
        
      
      <div class="ui two item stackable tabs menu">
        
          <a class="active item" data-tab="icon">Icons</a>
          
        
          <a class="item" data-tab="definition">Definition</a>
          
        
      </div>
    
  </div>
</div>

  <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
  <div class="bsa-cpc"></div>
  <script>
    (function(){
      if(typeof _bsa !== 'undefined' && _bsa) {
      _bsa.init('default', 'CVAIKK7I', 'placement:semanticuicom', {
        target: '.bsa-cpc',
        align: 'horizontal',
        disable_css: 'true'
      });
        }
    })();
  </script>
  <div class="ui vertical beg transition hidden segment">
    <i class="large red delete link icon"></i>
    <div class="ui red header">
      <i class="disabled warning sign icon"></i>
      <div class="content">
        Want to Support Open Source? Whitelist Your Ad-Blocker.
        <div class="sub header">
          We promise to not show more than one small ad per page. Dont worry, hiding this message will make sure you won't get nagged again.
        </div>
      </div>
    </div>
  </div>



<script src="/javascript/icon.js"></script>

<div class="main ui container">

  <div class="ui active tab" data-tab="icon">

    <iconSearch class="ui right aligned search">
      <div class="ui icon input">
        <input class="prompt" type="text" placeholder="Search icons...">
        <i class="search icon"></i>
      </div>
      <div class="results"></div>
    </iconSearch>

    <h2 class="ui header">Icon Set</h2>
    <p>An icon set contains an arbitrary number of glyphs</p>
    <div class="ui ignored warning message">
      Icons serve a very similar function to text in a page. In Semantic icons receive a special tag <code>&lt;i&gt;</code> which allow for an abbreviated markup when sitting along-side text.
    </div>

    <div class="ui ignored message">Semantic includes a complete port of <a href="https://fontawesome.com/" target="_blank">Font Awesome 5.0.8</a> designed by the <a href="https://twitter.com/fontawesome">FontAwesome</a> team for its standard icon set.</div>

    <div class="icon example">
      <h4 class="ui header">Accessibility</h4>
      <p>Icons can represent accessibility standards</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="american sign language interpreting icon"></i>american sign language interpreting</div>
        <div class="column"><i class="assistive listening systems icon"></i>assistive listening systems</div>
        <div class="column"><i class="audio description icon"></i>audio description</div>
        <div class="column"><i class="blind icon"></i>blind</div>
        <div class="column"><i class="braille icon"></i>braille</div>
        <div class="column"><i class="closed captioning icon"></i>closed captioning</div>
        <div class="column"><i class="closed captioning outline icon"></i>closed captioning outline</div>
        <div class="column"><i class="deaf icon"></i>deaf</div>
        <div class="column"><i class="low vision icon"></i>low vision</div>
        <div class="column"><i class="phone volume icon"></i>phone volume</div>
        <div class="column"><i class="question circle icon"></i>question circle</div>
        <div class="column"><i class="question circle outline icon"></i>question circle outline</div>
        <div class="column"><i class="sign language icon"></i>sign language</div>
        <div class="column"><i class="tty icon"></i>tty</div>
        <div class="column"><i class="universal access icon"></i>universal access</div>
        <div class="column"><i class="wheelchair icon"></i>wheelchair</div>
      </div>
      <div class="existing code">
        <i class="american sign language interpreting icon"></i>
        <i class="assistive listening systems icon"></i>
        <i class="audio description icon"></i>
        <i class="blind icon"></i>
        <i class="braille icon"></i>
        <i class="closed captioning icon"></i>
        <i class="closed captioning outline icon"></i>
        <i class="deaf icon"></i>
        <i class="low vision icon"></i>
        <i class="phone volume icon"></i>
        <i class="question circle icon"></i>
        <i class="question circle outline icon"></i>
        <i class="sign language icon"></i>
        <i class="tty icon"></i>
        <i class="universal access icon"></i>
        <i class="wheelchair icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Arrows</h4>
      <p>Icons can be used to indicate a direction</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="angle double down icon"></i>angle double down</div>
        <div class="column"><i class="angle double left icon"></i>angle double left</div>
        <div class="column"><i class="angle double right icon"></i>angle double right</div>
        <div class="column"><i class="angle double up icon"></i>angle double up</div>
        <div class="column"><i class="angle down icon"></i>angle down</div>
        <div class="column"><i class="angle left icon"></i>angle left</div>
        <div class="column"><i class="angle right icon"></i>angle right</div>
        <div class="column"><i class="angle up icon"></i>angle up</div>
        <div class="column"><i class="arrow alternate circle down icon"></i>arrow alternate circle down</div>
        <div class="column"><i class="arrow alternate circle down outline icon"></i>arrow alternate circle down outline</div>
        <div class="column"><i class="arrow alternate circle left icon"></i>arrow alternate circle left</div>
        <div class="column"><i class="arrow alternate circle left outline icon"></i>arrow alternate circle left outline</div>
        <div class="column"><i class="arrow alternate circle right icon"></i>arrow alternate circle right</div>
        <div class="column"><i class="arrow alternate circle right outline icon"></i>arrow alternate circle right outline</div>
        <div class="column"><i class="arrow alternate circle up icon"></i>arrow alternate circle up</div>
        <div class="column"><i class="arrow alternate circle up outline icon"></i>arrow alternate circle up outline</div>
        <div class="column"><i class="arrow circle down icon"></i>arrow circle down</div>
        <div class="column"><i class="arrow circle left icon"></i>arrow circle left</div>
        <div class="column"><i class="arrow circle right icon"></i>arrow circle right</div>
        <div class="column"><i class="arrow circle up icon"></i>arrow circle up</div>
        <div class="column"><i class="arrow down icon"></i>arrow down</div>
        <div class="column"><i class="arrow left icon"></i>arrow left</div>
        <div class="column"><i class="arrow right icon"></i>arrow right</div>
        <div class="column"><i class="arrow up icon"></i>arrow up</div>
        <div class="column"><i class="arrows alternate icon"></i>arrows alternate</div>
        <div class="column"><i class="arrows alternate horizontal icon"></i>arrows alternate horizontal</div>
        <div class="column"><i class="arrows alternate vertical icon"></i>arrows alternate vertical</div>
        <div class="column"><i class="caret down icon"></i>caret down</div>
        <div class="column"><i class="caret left icon"></i>caret left</div>
        <div class="column"><i class="caret right icon"></i>caret right</div>
        <div class="column"><i class="caret square down icon"></i>caret square down</div>
        <div class="column"><i class="caret square down outline icon"></i>caret square down outline</div>
        <div class="column"><i class="caret square left icon"></i>caret square left</div>
        <div class="column"><i class="caret square left outline icon"></i>caret square left outline</div>
        <div class="column"><i class="caret square right icon"></i>caret square right</div>
        <div class="column"><i class="caret square right outline icon"></i>caret square right outline</div>
        <div class="column"><i class="caret square up icon"></i>caret square up</div>
        <div class="column"><i class="caret square up outline icon"></i>caret square up outline</div>
        <div class="column"><i class="caret up icon"></i>caret up</div>
        <div class="column"><i class="cart arrow down icon"></i>cart arrow down</div>
        <div class="column"><i class="chart line icon"></i>chart line</div>
        <div class="column"><i class="chevron circle down icon"></i>chevron circle down</div>
        <div class="column"><i class="chevron circle left icon"></i>chevron circle left</div>
        <div class="column"><i class="chevron circle right icon"></i>chevron circle right</div>
        <div class="column"><i class="chevron circle up icon"></i>chevron circle up</div>
        <div class="column"><i class="chevron down icon"></i>chevron down</div>
        <div class="column"><i class="chevron left icon"></i>chevron left</div>
        <div class="column"><i class="chevron right icon"></i>chevron right</div>
        <div class="column"><i class="chevron up icon"></i>chevron up</div>
        <div class="column"><i class="cloud download icon"></i>cloud download</div>
        <div class="column"><i class="cloud upload icon"></i>cloud upload</div>
        <div class="column"><i class="download icon"></i>download</div>
        <div class="column"><i class="exchange icon"></i>exchange</div>
        <div class="column"><i class="expand arrows alternate icon"></i>expand arrows alternate</div>
        <div class="column"><i class="external alternate icon"></i>external alternate</div>
        <div class="column"><i class="external square alternate icon"></i>external square alternate</div>
        <div class="column"><i class="hand point down icon"></i>hand point down</div>
        <div class="column"><i class="hand point down outline icon"></i>hand point down outline</div>
        <div class="column"><i class="hand point left icon"></i>hand point left</div>
        <div class="column"><i class="hand point left outline icon"></i>hand point left outline</div>
        <div class="column"><i class="hand point right icon"></i>hand point right</div>
        <div class="column"><i class="hand point right outline icon"></i>hand point right outline</div>
        <div class="column"><i class="hand point up icon"></i>hand point up</div>
        <div class="column"><i class="hand point up outline icon"></i>hand point up outline</div>
        <div class="column"><i class="hand pointer icon"></i>hand pointer</div>
        <div class="column"><i class="hand pointer outline icon"></i>hand pointer outline</div>
        <div class="column"><i class="history icon"></i>history</div>
        <div class="column"><i class="level down alternate icon"></i>level down alternate</div>
        <div class="column"><i class="level up alternate icon"></i>level up alternate</div>
        <div class="column"><i class="location arrow icon"></i>location arrow</div>
        <div class="column"><i class="long arrow alternate down icon"></i>long arrow alternate down</div>
        <div class="column"><i class="long arrow alternate left icon"></i>long arrow alternate left</div>
        <div class="column"><i class="long arrow alternate right icon"></i>long arrow alternate right</div>
        <div class="column"><i class="long arrow alternate up icon"></i>long arrow alternate up</div>
        <div class="column"><i class="mouse pointer icon"></i>mouse pointer</div>
        <div class="column"><i class="play icon"></i>play</div>
        <div class="column"><i class="random icon"></i>random</div>
        <div class="column"><i class="recycle icon"></i>recycle</div>
        <div class="column"><i class="redo icon"></i>redo</div>
        <div class="column"><i class="redo alternate icon"></i>redo alternate</div>
        <div class="column"><i class="reply icon"></i>reply</div>
        <div class="column"><i class="reply all icon"></i>reply all</div>
        <div class="column"><i class="retweet icon"></i>retweet</div>
        <div class="column"><i class="share icon"></i>share</div>
        <div class="column"><i class="share square icon"></i>share square</div>
        <div class="column"><i class="share square outline icon"></i>share square outline</div>
        <div class="column"><i class="sign-in icon"></i>sign-in</div>
        <div class="column"><i class="sign-out icon"></i>sign-out</div>
        <div class="column"><i class="sign-in alternate icon"></i>sign-in alternate</div>
        <div class="column"><i class="sign-out alternate icon"></i>sign-out alternate</div>
        <div class="column"><i class="sort icon"></i>sort</div>
        <div class="column"><i class="sort alphabet down icon"></i>sort alphabet down</div>
        <div class="column"><i class="sort alphabet up icon"></i>sort alphabet up</div>
        <div class="column"><i class="sort amount down icon"></i>sort amount down</div>
        <div class="column"><i class="sort amount up icon"></i>sort amount up</div>
        <div class="column"><i class="sort down icon"></i>sort down</div>
        <div class="column"><i class="sort numeric down icon"></i>sort numeric down</div>
        <div class="column"><i class="sort numeric up icon"></i>sort numeric up</div>
        <div class="column"><i class="sort up icon"></i>sort up</div>
        <div class="column"><i class="sync icon"></i>sync</div>
        <div class="column"><i class="sync alternate icon"></i>sync alternate</div>
        <div class="column"><i class="text height icon"></i>text height</div>
        <div class="column"><i class="text width icon"></i>text width</div>
        <div class="column"><i class="undo icon"></i>undo</div>
        <div class="column"><i class="undo alternate icon"></i>undo alternate</div>
        <div class="column"><i class="upload icon"></i>upload</div>
        <div class="column"><i class="zoom-in icon"></i>zoom-in</div>
        <div class="column"><i class="zoom-out icon"></i>zoom-out</div>
      </div>
      <div class="existing code">
        <i class="angle double down icon"></i>
        <i class="angle double left icon"></i>
        <i class="angle double right icon"></i>
        <i class="angle double up icon"></i>
        <i class="angle down icon"></i>
        <i class="angle left icon"></i>
        <i class="angle right icon"></i>
        <i class="angle up icon"></i>
        <i class="arrow alternate circle down icon"></i>
        <i class="arrow alternate circle down outline icon"></i>
        <i class="arrow alternate circle left icon"></i>
        <i class="arrow alternate circle left outline icon"></i>
        <i class="arrow alternate circle right icon"></i>
        <i class="arrow alternate circle right outline icon"></i>
        <i class="arrow alternate circle up icon"></i>
        <i class="arrow alternate circle up outline icon"></i>
        <i class="arrow circle down icon"></i>
        <i class="arrow circle left icon"></i>
        <i class="arrow circle right icon"></i>
        <i class="arrow circle up icon"></i>
        <i class="arrow down icon"></i>
        <i class="arrow left icon"></i>
        <i class="arrow right icon"></i>
        <i class="arrow up icon"></i>
        <i class="arrows alternate icon"></i>
        <i class="arrows alternate horizontal icon"></i>
        <i class="arrows alternate vertical icon"></i>
        <i class="caret down icon"></i>
        <i class="caret left icon"></i>
        <i class="caret right icon"></i>
        <i class="caret square down icon"></i>
        <i class="caret square down outline icon"></i>
        <i class="caret square left icon"></i>
        <i class="caret square left outline icon"></i>
        <i class="caret square right icon"></i>
        <i class="caret square right outline icon"></i>
        <i class="caret square up icon"></i>
        <i class="caret square up outline icon"></i>
        <i class="caret up icon"></i>
        <i class="cart arrow down icon"></i>
        <i class="chart line icon"></i>
        <i class="chevron circle down icon"></i>
        <i class="chevron circle left icon"></i>
        <i class="chevron circle right icon"></i>
        <i class="chevron circle up icon"></i>
        <i class="chevron down icon"></i>
        <i class="chevron left icon"></i>
        <i class="chevron right icon"></i>
        <i class="chevron up icon"></i>
        <i class="cloud download icon"></i>
        <i class="cloud upload icon"></i>
        <i class="download icon"></i>
        <i class="exchange alternate icon"></i>
        <i class="expand arrows alternate icon"></i>
        <i class="external alternate icon"></i>
        <i class="external square alternate icon"></i>
        <i class="hand point down icon"></i>
        <i class="hand point down outline icon"></i>
        <i class="hand point left icon"></i>
        <i class="hand point left outline icon"></i>
        <i class="hand point right icon"></i>
        <i class="hand point right outline icon"></i>
        <i class="hand point up icon"></i>
        <i class="hand point up outline icon"></i>
        <i class="hand pointer icon"></i>
        <i class="hand pointer outline icon"></i>
        <i class="history icon"></i>
        <i class="level down alternate icon"></i>
        <i class="level up alternate icon"></i>
        <i class="location arrow icon"></i>
        <i class="long arrow alternate down icon"></i>
        <i class="long arrow alternate left icon"></i>
        <i class="long arrow alternate right icon"></i>
        <i class="long arrow alternate up icon"></i>
        <i class="mouse pointer icon"></i>
        <i class="play icon"></i>
        <i class="random icon"></i>
        <i class="recycle icon"></i>
        <i class="redo icon"></i>
        <i class="redo alternate icon"></i>
        <i class="reply icon"></i>
        <i class="reply all icon"></i>
        <i class="retweet icon"></i>
        <i class="share icon"></i>
        <i class="share square icon"></i>
        <i class="share square outline icon"></i>
        <i class="sign in alternate icon"></i>
        <i class="sign out alternate icon"></i>
        <i class="sort icon"></i>
        <i class="sort alphabet down icon"></i>
        <i class="sort alphabet up icon"></i>
        <i class="sort amount down icon"></i>
        <i class="sort amount up icon"></i>
        <i class="sort down icon"></i>
        <i class="sort numeric down icon"></i>
        <i class="sort numeric up icon"></i>
        <i class="sort up icon"></i>
        <i class="sync icon"></i>
        <i class="sync alternate icon"></i>
        <i class="text height icon"></i>
        <i class="text width icon"></i>
        <i class="undo icon"></i>
        <i class="undo alternate icon"></i>
        <i class="upload icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Audio & Video</h4>
      <p>Icons can be used to represent common ways to interact with audio and video</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="audio description icon"></i>audio description</div>
        <div class="column"><i class="backward icon"></i>backward</div>
        <div class="column"><i class="circle icon"></i>circle</div>
        <div class="column"><i class="circle outline icon"></i>circle outline</div>
        <div class="column"><i class="closed captioning icon"></i>closed captioning</div>
        <div class="column"><i class="closed captioning outline icon"></i>closed captioning outline</div>
        <div class="column"><i class="compress icon"></i>compress</div>
        <div class="column"><i class="eject icon"></i>eject</div>
        <div class="column"><i class="expand icon"></i>expand</div>
        <div class="column"><i class="expand arrows alternate icon"></i>expand arrows alternate</div>
        <div class="column"><i class="fast backward icon"></i>fast backward</div>
        <div class="column"><i class="fast forward icon"></i>fast forward</div>
        <div class="column"><i class="file audio icon"></i>file audio</div>
        <div class="column"><i class="file audio outline icon"></i>file audio outline</div>
        <div class="column"><i class="file video icon"></i>file video</div>
        <div class="column"><i class="file video outline icon"></i>file video outline</div>
        <div class="column"><i class="film icon"></i>film</div>
        <div class="column"><i class="forward icon"></i>forward</div>
        <div class="column"><i class="headphones icon"></i>headphones</div>
        <div class="column"><i class="microphone icon"></i>microphone</div>
        <div class="column"><i class="microphone slash icon"></i>microphone slash</div>
        <div class="column"><i class="music icon"></i>music</div>
        <div class="column"><i class="pause icon"></i>pause</div>
        <div class="column"><i class="pause circle icon"></i>pause circle</div>
        <div class="column"><i class="pause circle outline icon"></i>pause circle outline</div>
        <div class="column"><i class="phone volume icon"></i>phone volume</div>
        <div class="column"><i class="play icon"></i>play</div>
        <div class="column"><i class="play circle icon"></i>play circle</div>
        <div class="column"><i class="play circle outline icon"></i>play circle outline</div>
        <div class="column"><i class="podcast icon"></i>podcast</div>
        <div class="column"><i class="random icon"></i>random</div>
        <div class="column"><i class="redo icon"></i>redo</div>
        <div class="column"><i class="redo alternate icon"></i>redo alternate</div>
        <div class="column"><i class="rss icon"></i>rss</div>
        <div class="column"><i class="rss square icon"></i>rss square</div>
        <div class="column"><i class="step backward icon"></i>step backward</div>
        <div class="column"><i class="step forward icon"></i>step forward</div>
        <div class="column"><i class="stop icon"></i>stop</div>
        <div class="column"><i class="stop circle icon"></i>stop circle</div>
        <div class="column"><i class="stop circle outline icon"></i>stop circle outline</div>
        <div class="column"><i class="sync icon"></i>sync</div>
        <div class="column"><i class="sync alternate icon"></i>sync alternate</div>
        <div class="column"><i class="undo icon"></i>undo</div>
        <div class="column"><i class="undo alternate icon"></i>undo alternate</div>
        <div class="column"><i class="video icon"></i>video</div>
        <div class="column"><i class="volume down icon"></i>volume down</div>
        <div class="column"><i class="volume off icon"></i>volume off</div>
        <div class="column"><i class="volume up icon"></i>volume up</div>
      </div>
      <div class="existing code">
        <i class="audio description icon"></i>
        <i class="backward icon"></i>
        <i class="circle icon"></i>
        <i class="circle outline icon"></i>
        <i class="closed captioning icon"></i>
        <i class="closed captioning outline icon"></i>
        <i class="compress icon"></i>
        <i class="eject icon"></i>
        <i class="expand icon"></i>
        <i class="expand arrows alternate icon"></i>
        <i class="fast backward icon"></i>
        <i class="fast forward icon"></i>
        <i class="file audio icon"></i>
        <i class="file audio outline icon"></i>
        <i class="file video icon"></i>
        <i class="file video outline icon"></i>
        <i class="film icon"></i>
        <i class="forward icon"></i>
        <i class="headphones icon"></i>
        <i class="microphone icon"></i>
        <i class="microphone slash icon"></i>
        <i class="music icon"></i>
        <i class="pause icon"></i>
        <i class="pause circle icon"></i>
        <i class="pause circle outline icon"></i>
        <i class="phone volume icon"></i>
        <i class="play icon"></i>
        <i class="play circle icon"></i>
        <i class="play circle outline icon"></i>
        <i class="podcast icon"></i>
        <i class="random icon"></i>
        <i class="redo icon"></i>
        <i class="redo alternate icon"></i>
        <i class="rss icon"></i>
        <i class="rss square icon"></i>
        <i class="step backward icon"></i>
        <i class="step forward icon"></i>
        <i class="stop icon"></i>
        <i class="stop circle icon"></i>
        <i class="stop circle outline icon"></i>
        <i class="sync icon"></i>
        <i class="sync alternate icon"></i>
        <i class="undo icon"></i>
        <i class="undo alternate icon"></i>
        <i class="video icon"></i>
        <i class="volume down icon"></i>
        <i class="volume off icon"></i>
        <i class="volume up icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Business</h4>
      <p>Icons can be used to represent business and common business actions</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="address book icon"></i>address book</div>
        <div class="column"><i class="address book outline icon"></i>address book outline</div>
        <div class="column"><i class="address card icon"></i>address card</div>
        <div class="column"><i class="address card outline icon"></i>address card outline</div>
        <div class="column"><i class="archive icon"></i>archive</div>
        <div class="column"><i class="balance scale icon"></i>balance scale</div>
        <div class="column"><i class="birthday cake icon"></i>birthday cake</div>
        <div class="column"><i class="book icon"></i>book</div>
        <div class="column"><i class="briefcase icon"></i>briefcase</div>
        <div class="column"><i class="building icon"></i>building</div>
        <div class="column"><i class="building outline icon"></i>building outline</div>
        <div class="column"><i class="bullhorn icon"></i>bullhorn</div>
        <div class="column"><i class="bullseye icon"></i>bullseye</div>
        <div class="column"><i class="calculator icon"></i>calculator</div>
        <div class="column"><i class="calendar icon"></i>calendar</div>
        <div class="column"><i class="calendar outline icon"></i>calendar outline</div>
        <div class="column"><i class="calendar alternate icon"></i>calendar alternate</div>
        <div class="column"><i class="calendar alternate outline icon"></i>calendar alternate outline</div>
        <div class="column"><i class="certificate icon"></i>certificate</div>
        <div class="column"><i class="chart area icon"></i>chart area</div>
        <div class="column"><i class="chart bar icon"></i>chart bar</div>
        <div class="column"><i class="chart bar outline icon"></i>chart bar outline</div>
        <div class="column"><i class="chart line icon"></i>chart line</div>
        <div class="column"><i class="chart pie icon"></i>chart pie</div>
        <div class="column"><i class="clipboard icon"></i>clipboard</div>
        <div class="column"><i class="clipboard outline icon"></i>clipboard outline</div>
        <div class="column"><i class="coffee icon"></i>coffee</div>
        <div class="column"><i class="columns icon"></i>columns</div>
        <div class="column"><i class="compass icon"></i>compass</div>
        <div class="column"><i class="compass outline icon"></i>compass outline</div>
        <div class="column"><i class="copy icon"></i>copy</div>
        <div class="column"><i class="copy outline icon"></i>copy outline</div>
        <div class="column"><i class="copyright icon"></i>copyright</div>
        <div class="column"><i class="copyright outline icon"></i>copyright outline</div>
        <div class="column"><i class="cut icon"></i>cut</div>
        <div class="column"><i class="edit icon"></i>edit</div>
        <div class="column"><i class="edit outline icon"></i>edit outline</div>
        <div class="column"><i class="envelope icon"></i>envelope</div>
        <div class="column"><i class="envelope outline icon"></i>envelope outline</div>
        <div class="column"><i class="envelope open icon"></i>envelope open</div>
        <div class="column"><i class="envelope open outline icon"></i>envelope open outline</div>
        <div class="column"><i class="envelope square icon"></i>envelope square</div>
        <div class="column"><i class="eraser icon"></i>eraser</div>
        <div class="column"><i class="fax icon"></i>fax</div>
        <div class="column"><i class="file icon"></i>file</div>
        <div class="column"><i class="file outline icon"></i>file outline</div>
        <div class="column"><i class="file alternate icon"></i>file alternate</div>
        <div class="column"><i class="file alternate outline icon"></i>file alternate outline</div>
        <div class="column"><i class="folder icon"></i>folder</div>
        <div class="column"><i class="folder outline icon"></i>folder outline</div>
        <div class="column"><i class="folder open icon"></i>folder open</div>
        <div class="column"><i class="folder open outline icon"></i>folder open outline</div>
        <div class="column"><i class="globe icon"></i>globe</div>
        <div class="column"><i class="industry icon"></i>industry</div>
        <div class="column"><i class="paperclip icon"></i>paperclip</div>
        <div class="column"><i class="paste icon"></i>paste</div>
        <div class="column"><i class="pen square icon"></i>pen square</div>
        <div class="column"><i class="pencil alternate icon"></i>pencil alternate</div>
        <div class="column"><i class="percent icon"></i>percent</div>
        <div class="column"><i class="phone icon"></i>phone</div>
        <div class="column"><i class="phone square icon"></i>phone square</div>
        <div class="column"><i class="phone volume icon"></i>phone volume</div>
        <div class="column"><i class="registered icon"></i>registered</div>
        <div class="column"><i class="registered outline icon"></i>registered outline</div>
        <div class="column"><i class="save icon"></i>save</div>
        <div class="column"><i class="save outline icon"></i>save outline</div>
        <div class="column"><i class="sitemap icon"></i>sitemap</div>
        <div class="column"><i class="sticky note icon"></i>sticky note</div>
        <div class="column"><i class="sticky note outline icon"></i>sticky note outline</div>
        <div class="column"><i class="suitcase icon"></i>suitcase</div>
        <div class="column"><i class="table icon"></i>table</div>
        <div class="column"><i class="tag icon"></i>tag</div>
        <div class="column"><i class="tags icon"></i>tags</div>
        <div class="column"><i class="tasks icon"></i>tasks</div>
        <div class="column"><i class="thumbtack icon"></i>thumbtack</div>
        <div class="column"><i class="trademark icon"></i>trademark</div>
      </div>
      <div class="existing code">
        <i class="address book icon"></i>
        <i class="address book outline icon"></i>
        <i class="address card icon"></i>
        <i class="address card outline icon"></i>
        <i class="archive icon"></i>
        <i class="balance scale icon"></i>
        <i class="birthday cake icon"></i>
        <i class="book icon"></i>
        <i class="briefcase icon"></i>
        <i class="building icon"></i>
        <i class="building outline icon"></i>
        <i class="bullhorn icon"></i>
        <i class="bullseye icon"></i>
        <i class="calculator icon"></i>
        <i class="calendar icon"></i>
        <i class="calendar outline icon"></i>
        <i class="calendar alternate icon"></i>
        <i class="calendar alternate outline icon"></i>
        <i class="certificate icon"></i>
        <i class="chart area icon"></i>
        <i class="chart bar icon"></i>
        <i class="chart bar outline icon"></i>
        <i class="chart line icon"></i>
        <i class="chart pie icon"></i>
        <i class="clipboard icon"></i>
        <i class="clipboard outline icon"></i>
        <i class="coffee icon"></i>
        <i class="columns icon"></i>
        <i class="compass icon"></i>
        <i class="compass outline icon"></i>
        <i class="copy icon"></i>
        <i class="copy outline icon"></i>
        <i class="copyright icon"></i>
        <i class="copyright outline icon"></i>
        <i class="cut icon"></i>
        <i class="edit icon"></i>
        <i class="edit outline icon"></i>
        <i class="envelope icon"></i>
        <i class="envelope outline icon"></i>
        <i class="envelope open icon"></i>
        <i class="envelope open outline icon"></i>
        <i class="envelope square icon"></i>
        <i class="eraser icon"></i>
        <i class="fax icon"></i>
        <i class="file icon"></i>
        <i class="file outline icon"></i>
        <i class="file alternate icon"></i>
        <i class="file alternate outline icon"></i>
        <i class="folder icon"></i>
        <i class="folder outline icon"></i>
        <i class="folder open icon"></i>
        <i class="folder open outline icon"></i>
        <i class="globe icon"></i>
        <i class="industry icon"></i>
        <i class="paperclip icon"></i>
        <i class="paste icon"></i>
        <i class="pen square icon"></i>
        <i class="pencil alternate icon"></i>
        <i class="percent icon"></i>
        <i class="phone icon"></i>
        <i class="phone square icon"></i>
        <i class="phone volume icon"></i>
        <i class="registered icon"></i>
        <i class="registered outline icon"></i>
        <i class="save icon"></i>
        <i class="save outline icon"></i>
        <i class="sitemap icon"></i>
        <i class="sticky note icon"></i>
        <i class="sticky note outline icon"></i>
        <i class="suitcase icon"></i>
        <i class="table icon"></i>
        <i class="tag icon"></i>
        <i class="tags icon"></i>
        <i class="tasks icon"></i>
        <i class="thumbtack icon"></i>
        <i class="trademark icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Chess</h4>
      <p>Icons which represent the game chess</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="chess icon"></i>chess</div>
        <div class="column"><i class="chess bishop icon"></i>chess bishop</div>
        <div class="column"><i class="chess board icon"></i>chess board</div>
        <div class="column"><i class="chess king icon"></i>chess king</div>
        <div class="column"><i class="chess knight icon"></i>chess knight</div>
        <div class="column"><i class="chess pawn icon"></i>chess pawn</div>
        <div class="column"><i class="chess queen icon"></i>chess queen</div>
        <div class="column"><i class="chess rook icon"></i>chess rook</div>
        <div class="column"><i class="square full icon"></i>square full</div>
      </div>
      <div class="existing code">
        <i class="chess icon"></i>
        <i class="chess bishop icon"></i>
        <i class="chess board icon"></i>
        <i class="chess king icon"></i>
        <i class="chess knight icon"></i>
        <i class="chess pawn icon"></i>
        <i class="chess queen icon"></i>
        <i class="chess rook icon"></i>
        <i class="square full icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Code</h4>
      <p>Icons can represent programming and programming tools</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="archive icon"></i>archive</div>
        <div class="column"><i class="barcode icon"></i>barcode</div>
        <div class="column"><i class="bath icon"></i>bath</div>
        <div class="column"><i class="bug icon"></i>bug</div>
        <div class="column"><i class="code icon"></i>code</div>
        <div class="column"><i class="code branch icon"></i>code branch</div>
        <div class="column"><i class="coffee icon"></i>coffee</div>
        <div class="column"><i class="file icon"></i>file</div>
        <div class="column"><i class="file outline icon"></i>file outline</div>
        <div class="column"><i class="file alternate icon"></i>file alternate</div>
        <div class="column"><i class="file alternate outline icon"></i>file alternate outline</div>
        <div class="column"><i class="file code icon"></i>file code</div>
        <div class="column"><i class="file code outline icon"></i>file code outline</div>
        <div class="column"><i class="filter icon"></i>filter</div>
        <div class="column"><i class="fire extinguisher icon"></i>fire extinguisher</div>
        <div class="column"><i class="folder icon"></i>folder</div>
        <div class="column"><i class="folder outline icon"></i>folder outline</div>
        <div class="column"><i class="folder open icon"></i>folder open</div>
        <div class="column"><i class="folder open outline icon"></i>folder open outline</div>
        <div class="column"><i class="keyboard icon"></i>keyboard</div>
        <div class="column"><i class="keyboard outline icon"></i>keyboard outline</div>
        <div class="column"><i class="microchip icon"></i>microchip</div>
        <div class="column"><i class="qrcode icon"></i>qrcode</div>
        <div class="column"><i class="shield alternate icon"></i>shield alternate</div>
        <div class="column"><i class="sitemap icon"></i>sitemap</div>
        <div class="column"><i class="terminal icon"></i>terminal</div>
        <div class="column"><i class="user secret icon"></i>user secret</div>
        <div class="column"><i class="window close icon"></i>window close</div>
        <div class="column"><i class="window close outline icon"></i>window close outline</div>
        <div class="column"><i class="window maximize icon"></i>window maximize</div>
        <div class="column"><i class="window maximize outline icon"></i>window maximize outline</div>
        <div class="column"><i class="window minimize icon"></i>window minimize</div>
        <div class="column"><i class="window minimize outline icon"></i>window minimize outline</div>
        <div class="column"><i class="window restore icon"></i>window restore</div>
        <div class="column"><i class="window restore outline icon"></i>window restore outline</div>
      </div>
      <div class="existing code">
        <i class="archive icon"></i>
        <i class="barcode icon"></i>
        <i class="bath icon"></i>
        <i class="bug icon"></i>
        <i class="code icon"></i>
        <i class="code branch icon"></i>
        <i class="coffee icon"></i>
        <i class="file icon"></i>
        <i class="file outline icon"></i>
        <i class="file alternate icon"></i>
        <i class="file alternate outline icon"></i>
        <i class="file code icon"></i>
        <i class="file code outline icon"></i>
        <i class="filter icon"></i>
        <i class="fire extinguisher icon"></i>
        <i class="folder icon"></i>
        <i class="folder outline icon"></i>
        <i class="folder open icon"></i>
        <i class="folder open outline icon"></i>
        <i class="keyboard icon"></i>
        <i class="keyboard outline icon"></i>
        <i class="microchip icon"></i>
        <i class="qrcode icon"></i>
        <i class="shield alternate icon"></i>
        <i class="sitemap icon"></i>
        <i class="terminal icon"></i>
        <i class="user secret icon"></i>
        <i class="window close icon"></i>
        <i class="window close outline icon"></i>
        <i class="window maximize icon"></i>
        <i class="window maximize outline icon"></i>
        <i class="window minimize icon"></i>
        <i class="window minimize outline icon"></i>
        <i class="window restore icon"></i>
        <i class="window restore outline icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Communication</h4>
      <p>Icons which represent common ways of communication</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="address book icon"></i>address book</div>
        <div class="column"><i class="address book outline icon"></i>address book outline</div>
        <div class="column"><i class="address card icon"></i>address card</div>
        <div class="column"><i class="address card outline icon"></i>address card outline</div>
        <div class="column"><i class="american sign language interpreting icon"></i>american sign language interpreting</div>
        <div class="column"><i class="assistive listening systems icon"></i>assistive listening systems</div>
        <div class="column"><i class="at icon"></i>at</div>
        <div class="column"><i class="bell icon"></i>bell</div>
        <div class="column"><i class="bell outline icon"></i>bell outline</div>
        <div class="column"><i class="bell slash icon"></i>bell slash</div>
        <div class="column"><i class="bell slash outline icon"></i>bell slash outline</div>
        <div class="column"><i class="bullhorn icon"></i>bullhorn</div>
        <div class="column"><i class="comment icon"></i>comment</div>
        <div class="column"><i class="comment outline icon"></i>comment outline</div>
        <div class="column"><i class="comment alternate icon"></i>comment alternate</div>
        <div class="column"><i class="comment alternate outline icon"></i>comment alternate outline</div>
        <div class="column"><i class="comments icon"></i>comments</div>
        <div class="column"><i class="comments outline icon"></i>comments outline</div>
        <div class="column"><i class="envelope icon"></i>envelope</div>
        <div class="column"><i class="envelope outline icon"></i>envelope outline</div>
        <div class="column"><i class="envelope open icon"></i>envelope open</div>
        <div class="column"><i class="envelope open outline icon"></i>envelope open outline</div>
        <div class="column"><i class="envelope square icon"></i>envelope square</div>
        <div class="column"><i class="fax icon"></i>fax</div>
        <div class="column"><i class="inbox icon"></i>inbox</div>
        <div class="column"><i class="language icon"></i>language</div>
        <div class="column"><i class="microphone icon"></i>microphone</div>
        <div class="column"><i class="microphone slash icon"></i>microphone slash</div>
        <div class="column"><i class="mobile icon"></i>mobile</div>
        <div class="column"><i class="mobile alternate icon"></i>mobile alternate</div>
        <div class="column"><i class="paper plane icon"></i>paper plane</div>
        <div class="column"><i class="paper plane outline icon"></i>paper plane outline</div>
        <div class="column"><i class="phone icon"></i>phone</div>
        <div class="column"><i class="phone square icon"></i>phone square</div>
        <div class="column"><i class="phone volume icon"></i>phone volume</div>
        <div class="column"><i class="rss icon"></i>rss</div>
        <div class="column"><i class="rss square icon"></i>rss square</div>
        <div class="column"><i class="tty icon"></i>tty</div>
        <div class="column"><i class="wifi icon"></i>wifi</div>
      </div>
      <div class="existing code">
        <i class="address book icon"></i>
        <i class="address book outline icon"></i>
        <i class="address card icon"></i>
        <i class="address card outline icon"></i>
        <i class="american sign language interpreting icon"></i>
        <i class="assistive listening systems icon"></i>
        <i class="at icon"></i>
        <i class="bell icon"></i>
        <i class="bell outline icon"></i>
        <i class="bell slash icon"></i>
        <i class="bell slash outline icon"></i>
        <i class="bullhorn icon"></i>
        <i class="comment icon"></i>
        <i class="comment outline icon"></i>
        <i class="comment alternate icon"></i>
        <i class="comment alternate outline icon"></i>
        <i class="comments icon"></i>
        <i class="comments outline icon"></i>
        <i class="envelope icon"></i>
        <i class="envelope outline icon"></i>
        <i class="envelope open icon"></i>
        <i class="envelope open outline icon"></i>
        <i class="envelope square icon"></i>
        <i class="fax icon"></i>
        <i class="inbox icon"></i>
        <i class="language icon"></i>
        <i class="microphone icon"></i>
        <i class="microphone slash icon"></i>
        <i class="mobile icon"></i>
        <i class="mobile alternate icon"></i>
        <i class="paper plane icon"></i>
        <i class="paper plane outline icon"></i>
        <i class="phone icon"></i>
        <i class="phone square icon"></i>
        <i class="phone volume icon"></i>
        <i class="rss icon"></i>
        <i class="rss square icon"></i>
        <i class="tty icon"></i>
        <i class="wifi icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Computers</h4>
      <p>Icons can represent computing devices, or types of content found on a computer</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="desktop icon"></i>desktop</div>
        <div class="column"><i class="download icon"></i>download</div>
        <div class="column"><i class="hdd icon"></i>hdd</div>
        <div class="column"><i class="hdd outline icon"></i>hdd outline</div>
        <div class="column"><i class="headphones icon"></i>headphones</div>
        <div class="column"><i class="keyboard icon"></i>keyboard</div>
        <div class="column"><i class="keyboard outline icon"></i>keyboard outline</div>
        <div class="column"><i class="laptop icon"></i>laptop</div>
        <div class="column"><i class="microchip icon"></i>microchip</div>
        <div class="column"><i class="mobile icon"></i>mobile</div>
        <div class="column"><i class="mobile alternate icon"></i>mobile alternate</div>
        <div class="column"><i class="plug icon"></i>plug</div>
        <div class="column"><i class="power off icon"></i>power off</div>
        <div class="column"><i class="print icon"></i>print</div>
        <div class="column"><i class="save icon"></i>save</div>
        <div class="column"><i class="save outline icon"></i>save outline</div>
        <div class="column"><i class="server icon"></i>server</div>
        <div class="column"><i class="tablet icon"></i>tablet</div>
        <div class="column"><i class="tablet alternate icon"></i>tablet alternate</div>
        <div class="column"><i class="tv icon"></i>tv</div>
        <div class="column"><i class="upload icon"></i>upload</div>
      </div>
      <div class="existing code">
        <i class="desktop icon"></i>
        <i class="download icon"></i>
        <i class="hdd icon"></i>
        <i class="hdd outline icon"></i>
        <i class="headphones icon"></i>
        <i class="keyboard icon"></i>
        <i class="keyboard outline icon"></i>
        <i class="laptop icon"></i>
        <i class="microchip icon"></i>
        <i class="mobile icon"></i>
        <i class="mobile alternate icon"></i>
        <i class="plug icon"></i>
        <i class="power off icon"></i>
        <i class="print icon"></i>
        <i class="save icon"></i>
        <i class="save outline icon"></i>
        <i class="server icon"></i>
        <i class="tablet icon"></i>
        <i class="tablet alternate icon"></i>
        <i class="tv icon"></i>
        <i class="upload icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Currency</h4>
      <p>Icons can represent units of currency</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="dollar sign icon"></i>dollar sign</div>
        <div class="column"><i class="euro sign icon"></i>euro sign</div>
        <div class="column"><i class="lira sign icon"></i>lira sign</div>
        <div class="column"><i class="money bill alternate icon"></i>money bill alternate</div>
        <div class="column"><i class="money bill alternate outline icon"></i>money bill alternate outline</div>
        <div class="column"><i class="pound sign icon"></i>pound sign</div>
        <div class="column"><i class="ruble sign icon"></i>ruble sign</div>
        <div class="column"><i class="rupee sign icon"></i>rupee sign</div>
        <div class="column"><i class="shekel sign icon"></i>shekel sign</div>
        <div class="column"><i class="won sign icon"></i>won sign</div>
        <div class="column"><i class="yen sign icon"></i>yen sign</div>
      </div>
      <div class="existing code">
        <i class="dollar sign icon"></i>
        <i class="euro sign icon"></i>
        <i class="lira sign icon"></i>
        <i class="money bill alternate icon"></i>
        <i class="money bill alternate outline icon"></i>
        <i class="pound sign icon"></i>
        <i class="ruble sign icon"></i>
        <i class="rupee sign icon"></i>
        <i class="shekel sign icon"></i>
        <i class="won sign icon"></i>
        <i class="yen sign icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Date & Time</h4>
      <p>Icons that represent common ways of showing date and time</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="bell icon"></i>bell</div>
        <div class="column"><i class="bell outline icon"></i>bell outline</div>
        <div class="column"><i class="bell slash icon"></i>bell slash</div>
        <div class="column"><i class="bell slash outline icon"></i>bell slash outline</div>
        <div class="column"><i class="calendar icon"></i>calendar</div>
        <div class="column"><i class="calendar outline icon"></i>calendar outline</div>
        <div class="column"><i class="calendar alternate icon"></i>calendar alternate</div>
        <div class="column"><i class="calendar alternate outline icon"></i>calendar alternate outline</div>
        <div class="column"><i class="calendar check icon"></i>calendar check</div>
        <div class="column"><i class="calendar check outline icon"></i>calendar check outline</div>
        <div class="column"><i class="calendar minus icon"></i>calendar minus</div>
        <div class="column"><i class="calendar minus outline icon"></i>calendar minus outline</div>
        <div class="column"><i class="calendar plus icon"></i>calendar plus</div>
        <div class="column"><i class="calendar plus outline icon"></i>calendar plus outline</div>
        <div class="column"><i class="calendar times icon"></i>calendar times</div>
        <div class="column"><i class="calendar times outline icon"></i>calendar times outline</div>
        <div class="column"><i class="clock icon"></i>clock</div>
        <div class="column"><i class="clock outline icon"></i>clock outline</div>
        <div class="column"><i class="hourglass icon"></i>hourglass</div>
        <div class="column"><i class="hourglass outline icon"></i>hourglass outline</div>
        <div class="column"><i class="hourglass end icon"></i>hourglass end</div>
        <div class="column"><i class="hourglass half icon"></i>hourglass half</div>
        <div class="column"><i class="hourglass start icon"></i>hourglass start</div>
        <div class="column"><i class="stopwatch icon"></i>stopwatch</div>
      </div>
      <div class="existing code">
        <i class="bell icon"></i>
        <i class="bell outline icon"></i>
        <i class="bell slash icon"></i>
        <i class="bell slash outline icon"></i>
        <i class="calendar icon"></i>
        <i class="calendar outline icon"></i>
        <i class="calendar alternate icon"></i>
        <i class="calendar alternate outline icon"></i>
        <i class="calendar check icon"></i>
        <i class="calendar check outline icon"></i>
        <i class="calendar minus icon"></i>
        <i class="calendar minus outline icon"></i>
        <i class="calendar plus icon"></i>
        <i class="calendar plus outline icon"></i>
        <i class="calendar times icon"></i>
        <i class="calendar times outline icon"></i>
        <i class="clock icon"></i>
        <i class="clock outline icon"></i>
        <i class="hourglass icon"></i>
        <i class="hourglass outline icon"></i>
        <i class="hourglass end icon"></i>
        <i class="hourglass half icon"></i>
        <i class="hourglass start icon"></i>
        <i class="stopwatch icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Design</h4>
      <p>Icons can represent common design related symbols or techniques</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="adjust icon"></i>adjust</div>
        <div class="column"><i class="clone icon"></i>clone</div>
        <div class="column"><i class="clone outline icon"></i>clone outline</div>
        <div class="column"><i class="copy icon"></i>copy</div>
        <div class="column"><i class="copy outline icon"></i>copy outline</div>
        <div class="column"><i class="crop icon"></i>crop</div>
        <div class="column"><i class="crosshairs icon"></i>crosshairs</div>
        <div class="column"><i class="cut icon"></i>cut</div>
        <div class="column"><i class="edit icon"></i>edit</div>
        <div class="column"><i class="edit outline icon"></i>edit outline</div>
        <div class="column"><i class="eraser icon"></i>eraser</div>
        <div class="column"><i class="eye icon"></i>eye</div>
        <div class="column"><i class="eye dropper icon"></i>eye dropper</div>
        <div class="column"><i class="eye slash icon"></i>eye slash</div>
        <div class="column"><i class="eye slash outline icon"></i>eye slash outline</div>
        <div class="column"><i class="object group icon"></i>object group</div>
        <div class="column"><i class="object group outline icon"></i>object group outline</div>
        <div class="column"><i class="object ungroup icon"></i>object ungroup</div>
        <div class="column"><i class="object ungroup outline icon"></i>object ungroup outline</div>
        <div class="column"><i class="paint brush icon"></i>paint brush</div>
        <div class="column"><i class="paste icon"></i>paste</div>
        <div class="column"><i class="pencil alternate icon"></i>pencil alternate</div>
        <div class="column"><i class="save icon"></i>save</div>
        <div class="column"><i class="save outline icon"></i>save outline</div>
        <div class="column"><i class="tint icon"></i>tint</div>
      </div>
      <div class="existing code">
        <i class="adjust icon"></i>
        <i class="clone icon"></i>
        <i class="clone outline icon"></i>
        <i class="copy icon"></i>
        <i class="copy outline icon"></i>
        <i class="crop icon"></i>
        <i class="crosshairs icon"></i>
        <i class="cut icon"></i>
        <i class="edit icon"></i>
        <i class="edit outline icon"></i>
        <i class="eraser icon"></i>
        <i class="eye icon"></i>
        <i class="eye dropper icon"></i>
        <i class="eye slash icon"></i>
        <i class="eye slash outline icon"></i>
        <i class="object group icon"></i>
        <i class="object group outline icon"></i>
        <i class="object ungroup icon"></i>
        <i class="object ungroup outline icon"></i>
        <i class="paint brush icon"></i>
        <i class="paste icon"></i>
        <i class="pencil alternate icon"></i>
        <i class="save icon"></i>
        <i class="save outline icon"></i>
        <i class="tint icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Editors</h4>
      <p>Icons can represent text editors and common editor actions</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="align center icon"></i>align center</div>
        <div class="column"><i class="align justify icon"></i>align justify</div>
        <div class="column"><i class="align left icon"></i>align left</div>
        <div class="column"><i class="align right icon"></i>align right</div>
        <div class="column"><i class="bold icon"></i>bold</div>
        <div class="column"><i class="clipboard icon"></i>clipboard</div>
        <div class="column"><i class="clipboard outline icon"></i>clipboard outline</div>
        <div class="column"><i class="clone icon"></i>clone</div>
        <div class="column"><i class="clone outline icon"></i>clone outline</div>
        <div class="column"><i class="columns icon"></i>columns</div>
        <div class="column"><i class="copy icon"></i>copy</div>
        <div class="column"><i class="copy outline icon"></i>copy outline</div>
        <div class="column"><i class="cut icon"></i>cut</div>
        <div class="column"><i class="edit icon"></i>edit</div>
        <div class="column"><i class="edit outline icon"></i>edit outline</div>
        <div class="column"><i class="eraser icon"></i>eraser</div>
        <div class="column"><i class="file icon"></i>file</div>
        <div class="column"><i class="file outline icon"></i>file outline</div>
        <div class="column"><i class="file alternate icon"></i>file alternate</div>
        <div class="column"><i class="file alternate outline icon"></i>file alternate outline</div>
        <div class="column"><i class="font icon"></i>font</div>
        <div class="column"><i class="heading icon"></i>heading</div>
        <div class="column"><i class="i cursor icon"></i>i cursor</div>
        <div class="column"><i class="indent icon"></i>indent</div>
        <div class="column"><i class="italic icon"></i>italic</div>
        <div class="column"><i class="linkify icon"></i>linkify</div>
        <div class="column"><i class="list icon"></i>list</div>
        <div class="column"><i class="list alternate icon"></i>list alternate</div>
        <div class="column"><i class="list alternate outline icon"></i>list alternate outline</div>
        <div class="column"><i class="list ol icon"></i>list ol</div>
        <div class="column"><i class="list ul icon"></i>list ul</div>
        <div class="column"><i class="outdent icon"></i>outdent</div>
        <div class="column"><i class="paper plane icon"></i>paper plane</div>
        <div class="column"><i class="paper plane outline icon"></i>paper plane outline</div>
        <div class="column"><i class="paperclip icon"></i>paperclip</div>
        <div class="column"><i class="paragraph icon"></i>paragraph</div>
        <div class="column"><i class="paste icon"></i>paste</div>
        <div class="column"><i class="pencil alternate icon"></i>pencil alternate</div>
        <div class="column"><i class="print icon"></i>print</div>
        <div class="column"><i class="quote left icon"></i>quote left</div>
        <div class="column"><i class="quote right icon"></i>quote right</div>
        <div class="column"><i class="redo icon"></i>redo</div>
        <div class="column"><i class="redo alternate icon"></i>redo alternate</div>
        <div class="column"><i class="reply icon"></i>reply</div>
        <div class="column"><i class="reply all icon"></i>reply all</div>
        <div class="column"><i class="share icon"></i>share</div>
        <div class="column"><i class="strikethrough icon"></i>strikethrough</div>
        <div class="column"><i class="subscript icon"></i>subscript</div>
        <div class="column"><i class="superscript icon"></i>superscript</div>
        <div class="column"><i class="sync icon"></i>sync</div>
        <div class="column"><i class="sync alternate icon"></i>sync alternate</div>
        <div class="column"><i class="table icon"></i>table</div>
        <div class="column"><i class="tasks icon"></i>tasks</div>
        <div class="column"><i class="text height icon"></i>text height</div>
        <div class="column"><i class="text width icon"></i>text width</div>
        <div class="column"><i class="th icon"></i>th</div>
        <div class="column"><i class="th large icon"></i>th large</div>
        <div class="column"><i class="th list icon"></i>th list</div>
        <div class="column"><i class="trash icon"></i>trash</div>
        <div class="column"><i class="trash alternate icon"></i>trash alternate</div>
        <div class="column"><i class="trash alternate outline icon"></i>trash alternate outline</div>
        <div class="column"><i class="underline icon"></i>underline</div>
        <div class="column"><i class="undo icon"></i>undo</div>
        <div class="column"><i class="undo alternate icon"></i>undo alternate</div>
        <div class="column"><i class="unlink icon"></i>unlink</div>
      </div>
      <div class="existing code">
        <i class="align center icon"></i>
        <i class="align justify icon"></i>
        <i class="align left icon"></i>
        <i class="align right icon"></i>
        <i class="bold icon"></i>
        <i class="clipboard icon"></i>
        <i class="clipboard outline icon"></i>
        <i class="clone icon"></i>
        <i class="clone outline icon"></i>
        <i class="columns icon"></i>
        <i class="copy icon"></i>
        <i class="copy outline icon"></i>
        <i class="cut icon"></i>
        <i class="edit icon"></i>
        <i class="edit outline icon"></i>
        <i class="eraser icon"></i>
        <i class="file icon"></i>
        <i class="file outline icon"></i>
        <i class="file alternate icon"></i>
        <i class="file alternate outline icon"></i>
        <i class="font icon"></i>
        <i class="heading icon"></i>
        <i class="i cursor icon"></i>
        <i class="indent icon"></i>
        <i class="italic icon"></i>
        <i class="linkify icon"></i>
        <i class="list icon"></i>
        <i class="list alternate icon"></i>
        <i class="list alternate outline icon"></i>
        <i class="list ol icon"></i>
        <i class="list ul icon"></i>
        <i class="outdent icon"></i>
        <i class="paper plane icon"></i>
        <i class="paper plane outline icon"></i>
        <i class="paperclip icon"></i>
        <i class="paragraph icon"></i>
        <i class="paste icon"></i>
        <i class="pencil alternate icon"></i>
        <i class="print icon"></i>
        <i class="quote left icon"></i>
        <i class="quote right icon"></i>
        <i class="redo icon"></i>
        <i class="redo alternate icon"></i>
        <i class="reply icon"></i>
        <i class="reply all icon"></i>
        <i class="share icon"></i>
        <i class="strikethrough icon"></i>
        <i class="subscript icon"></i>
        <i class="superscript icon"></i>
        <i class="sync icon"></i>
        <i class="sync alternate icon"></i>
        <i class="table icon"></i>
        <i class="tasks icon"></i>
        <i class="text height icon"></i>
        <i class="text width icon"></i>
        <i class="th icon"></i>
        <i class="th large icon"></i>
        <i class="th list icon"></i>
        <i class="trash icon"></i>
        <i class="trash alternate icon"></i>
        <i class="trash alternate outline icon"></i>
        <i class="underline icon"></i>
        <i class="undo icon"></i>
        <i class="undo alternate icon"></i>
        <i class="unlink icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Files</h4>
      <p>Icons can represent elements of a computer and its file system</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="archive icon"></i>archive</div>
        <div class="column"><i class="clone icon"></i>clone</div>
        <div class="column"><i class="clone outline icon"></i>clone outline</div>
        <div class="column"><i class="copy icon"></i>copy</div>
        <div class="column"><i class="copy outline icon"></i>copy outline</div>
        <div class="column"><i class="cut icon"></i>cut</div>
        <div class="column"><i class="file icon"></i>file</div>
        <div class="column"><i class="file outline icon"></i>file outline</div>
        <div class="column"><i class="file alternate icon"></i>file alternate</div>
        <div class="column"><i class="file alternate outline icon"></i>file alternate outline</div>
        <div class="column"><i class="file archive icon"></i>file archive</div>
        <div class="column"><i class="file archive outline icon"></i>file archive outline</div>
        <div class="column"><i class="file audio icon"></i>file audio</div>
        <div class="column"><i class="file audio outline icon"></i>file audio outline</div>
        <div class="column"><i class="file code icon"></i>file code</div>
        <div class="column"><i class="file code outline icon"></i>file code outline</div>
        <div class="column"><i class="file excel icon"></i>file excel</div>
        <div class="column"><i class="file excel outline icon"></i>file excel outline</div>
        <div class="column"><i class="file image icon"></i>file image</div>
        <div class="column"><i class="file image outline icon"></i>file image outline</div>
        <div class="column"><i class="file pdf icon"></i>file pdf</div>
        <div class="column"><i class="file pdf outline icon"></i>file pdf outline</div>
        <div class="column"><i class="file powerpoint icon"></i>file powerpoint</div>
        <div class="column"><i class="file powerpoint outline icon"></i>file powerpoint outline</div>
        <div class="column"><i class="file video icon"></i>file video</div>
        <div class="column"><i class="file video outline icon"></i>file video outline</div>
        <div class="column"><i class="file word icon"></i>file word</div>
        <div class="column"><i class="file word outline icon"></i>file word outline</div>
        <div class="column"><i class="folder icon"></i>folder</div>
        <div class="column"><i class="folder outline icon"></i>folder outline</div>
        <div class="column"><i class="folder open icon"></i>folder open</div>
        <div class="column"><i class="folder open outline icon"></i>folder open outline</div>
        <div class="column"><i class="paste icon"></i>paste</div>
        <div class="column"><i class="save icon"></i>save</div>
        <div class="column"><i class="save outline icon"></i>save outline</div>
        <div class="column"><i class="sticky note icon"></i>sticky note</div>
        <div class="column"><i class="sticky note outline icon"></i>sticky note outline</div>
      </div>
      <div class="existing code">
        <i class="archive icon"></i>
        <i class="clone icon"></i>
        <i class="clone outline icon"></i>
        <i class="copy icon"></i>
        <i class="copy outline icon"></i>
        <i class="cut icon"></i>
        <i class="file icon"></i>
        <i class="file outline icon"></i>
        <i class="file alternate icon"></i>
        <i class="file alternate outline icon"></i>
        <i class="file archive icon"></i>
        <i class="file archive outline icon"></i>
        <i class="file audio icon"></i>
        <i class="file audio outline icon"></i>
        <i class="file code icon"></i>
        <i class="file code outline icon"></i>
        <i class="file excel icon"></i>
        <i class="file excel outline icon"></i>
        <i class="file image icon"></i>
        <i class="file image outline icon"></i>
        <i class="file pdf icon"></i>
        <i class="file pdf outline icon"></i>
        <i class="file powerpoint icon"></i>
        <i class="file powerpoint outline icon"></i>
        <i class="file video icon"></i>
        <i class="file video outline icon"></i>
        <i class="file word icon"></i>
        <i class="file word outline icon"></i>
        <i class="folder icon"></i>
        <i class="folder outline icon"></i>
        <i class="folder open icon"></i>
        <i class="folder open outline icon"></i>
        <i class="paste icon"></i>
        <i class="save icon"></i>
        <i class="save outline icon"></i>
        <i class="sticky note icon"></i>
        <i class="sticky note outline icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Genders</h4>
      <p>Icons can represent genders or types of sexuality</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="genderless icon"></i>genderless</div>
        <div class="column"><i class="mars icon"></i>mars</div>
        <div class="column"><i class="mars double icon"></i>mars double</div>
        <div class="column"><i class="mars stroke icon"></i>mars stroke</div>
        <div class="column"><i class="mars stroke horizontal icon"></i>mars stroke horizontal</div>
        <div class="column"><i class="mars stroke vertical icon"></i>mars stroke vertical</div>
        <div class="column"><i class="mercury icon"></i>mercury</div>
        <div class="column"><i class="neuter icon"></i>neuter</div>
        <div class="column"><i class="transgender icon"></i>transgender</div>
        <div class="column"><i class="transgender alternate icon"></i>transgender alternate</div>
        <div class="column"><i class="venus icon"></i>venus</div>
        <div class="column"><i class="venus double icon"></i>venus double</div>
        <div class="column"><i class="venus mars icon"></i>venus mars</div>
      </div>
      <div class="existing code">
        <i class="genderless icon"></i>
        <i class="mars icon"></i>
        <i class="mars double icon"></i>
        <i class="mars stroke icon"></i>
        <i class="mars stroke horizontal icon"></i>
        <i class="mars stroke vertical icon"></i>
        <i class="mercury icon"></i>
        <i class="neuter icon"></i>
        <i class="transgender icon"></i>
        <i class="transgender alternate icon"></i>
        <i class="venus icon"></i>
        <i class="venus double icon"></i>
        <i class="venus mars icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Hands & Gestures</h4>
      <p>Icons can represent hand signals and gestures</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="hand lizard icon"></i>hand lizard</div>
        <div class="column"><i class="hand lizard outline icon"></i>hand lizard outline</div>
        <div class="column"><i class="hand paper icon"></i>hand paper</div>
        <div class="column"><i class="hand paper outline icon"></i>hand paper outline</div>
        <div class="column"><i class="hand peace icon"></i>hand peace</div>
        <div class="column"><i class="hand peace outline icon"></i>hand peace outline</div>
        <div class="column"><i class="hand point down icon"></i>hand point down</div>
        <div class="column"><i class="hand point down outline icon"></i>hand point down outline</div>
        <div class="column"><i class="hand point left icon"></i>hand point left</div>
        <div class="column"><i class="hand point left outline icon"></i>hand point left outline</div>
        <div class="column"><i class="hand point right icon"></i>hand point right</div>
        <div class="column"><i class="hand point right outline icon"></i>hand point right outline</div>
        <div class="column"><i class="hand point up icon"></i>hand point up</div>
        <div class="column"><i class="hand point up outline icon"></i>hand point up outline</div>
        <div class="column"><i class="hand pointer icon"></i>hand pointer</div>
        <div class="column"><i class="hand pointer outline icon"></i>hand pointer outline</div>
        <div class="column"><i class="hand rock icon"></i>hand rock</div>
        <div class="column"><i class="hand rock outline icon"></i>hand rock outline</div>
        <div class="column"><i class="hand scissors icon"></i>hand scissors</div>
        <div class="column"><i class="hand scissors outline icon"></i>hand scissors outline</div>
        <div class="column"><i class="hand spock icon"></i>hand spock</div>
        <div class="column"><i class="hand spock outline icon"></i>hand spock outline</div>
        <div class="column"><i class="handshake icon"></i>handshake</div>
        <div class="column"><i class="handshake outline icon"></i>handshake outline</div>
        <div class="column"><i class="thumbs down icon"></i>thumbs down</div>
        <div class="column"><i class="thumbs down outline icon"></i>thumbs down outline</div>
        <div class="column"><i class="thumbs up icon"></i>thumbs up</div>
        <div class="column"><i class="thumbs up outline icon"></i>thumbs up outline</div>
      </div>
      <div class="existing code">
        <i class="hand lizard icon"></i>
        <i class="hand lizard outline icon"></i>
        <i class="hand paper icon"></i>
        <i class="hand paper outline icon"></i>
        <i class="hand peace icon"></i>
        <i class="hand peace outline icon"></i>
        <i class="hand point down icon"></i>
        <i class="hand point down outline icon"></i>
        <i class="hand point left icon"></i>
        <i class="hand point left outline icon"></i>
        <i class="hand point right icon"></i>
        <i class="hand point right outline icon"></i>
        <i class="hand point up icon"></i>
        <i class="hand point up outline icon"></i>
        <i class="hand pointer icon"></i>
        <i class="hand pointer outline icon"></i>
        <i class="hand rock icon"></i>
        <i class="hand rock outline icon"></i>
        <i class="hand scissors icon"></i>
        <i class="hand scissors outline icon"></i>
        <i class="hand spock icon"></i>
        <i class="hand spock outline icon"></i>
        <i class="handshake icon"></i>
        <i class="handshake outline icon"></i>
        <i class="thumbs down icon"></i>
        <i class="thumbs down outline icon"></i>
        <i class="thumbs up icon"></i>
        <i class="thumbs up outline icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Health</h4>
      <p>Icons which represent common health symbols</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="ambulance icon"></i>ambulance</div>
        <div class="column"><i class="h square icon"></i>h square</div>
        <div class="column"><i class="heart icon"></i>heart</div>
        <div class="column"><i class="heart outline icon"></i>heart outline</div>
        <div class="column"><i class="heartbeat icon"></i>heartbeat</div>
        <div class="column"><i class="hospital icon"></i>hospital</div>
        <div class="column"><i class="hospital outline icon"></i>hospital outline</div>
        <div class="column"><i class="medkit icon"></i>medkit</div>
        <div class="column"><i class="plus square icon"></i>plus square</div>
        <div class="column"><i class="plus square outline icon"></i>plus square outline</div>
        <div class="column"><i class="stethoscope icon"></i>stethoscope</div>
        <div class="column"><i class="user md icon"></i>user md</div>
        <div class="column"><i class="wheelchair icon"></i>wheelchair</div>
      </div>
      <div class="existing code">
        <i class="ambulance icon"></i>
        <i class="h square icon"></i>
        <i class="heart icon"></i>
        <i class="heart outline icon"></i>
        <i class="heartbeat icon"></i>
        <i class="hospital icon"></i>
        <i class="hospital outline icon"></i>
        <i class="medkit icon"></i>
        <i class="plus square icon"></i>
        <i class="plus square outline icon"></i>
        <i class="stethoscope icon"></i>
        <i class="user md icon"></i>
        <i class="wheelchair icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Images</h4>
      <p>Icons that represent common image symbols and actions</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="adjust icon"></i>adjust</div>
        <div class="column"><i class="bolt icon"></i>bolt</div>
        <div class="column"><i class="camera icon"></i>camera</div>
        <div class="column"><i class="camera retro icon"></i>camera retro</div>
        <div class="column"><i class="clone icon"></i>clone</div>
        <div class="column"><i class="clone outline icon"></i>clone outline</div>
        <div class="column"><i class="compress icon"></i>compress</div>
        <div class="column"><i class="expand icon"></i>expand</div>
        <div class="column"><i class="eye icon"></i>eye</div>
        <div class="column"><i class="eye dropper icon"></i>eye dropper</div>
        <div class="column"><i class="eye slash icon"></i>eye slash</div>
        <div class="column"><i class="eye slash outline icon"></i>eye slash outline</div>
        <div class="column"><i class="file image icon"></i>file image</div>
        <div class="column"><i class="file image outline icon"></i>file image outline</div>
        <div class="column"><i class="film icon"></i>film</div>
        <div class="column"><i class="id badge icon"></i>id badge</div>
        <div class="column"><i class="id badge outline icon"></i>id badge outline</div>
        <div class="column"><i class="id card icon"></i>id card</div>
        <div class="column"><i class="id card outline icon"></i>id card outline</div>
        <div class="column"><i class="image icon"></i>image</div>
        <div class="column"><i class="image outline icon"></i>image outline</div>
        <div class="column"><i class="images icon"></i>images</div>
        <div class="column"><i class="images outline icon"></i>images outline</div>
        <div class="column"><i class="sliders horizontal icon"></i>sliders horizontal</div>
        <div class="column"><i class="tint icon"></i>tint</div>
      </div>
      <div class="existing code">
        <i class="adjust icon"></i>
        <i class="bolt icon"></i>
        <i class="camera icon"></i>
        <i class="camera retro icon"></i>
        <i class="clone icon"></i>
        <i class="clone outline icon"></i>
        <i class="compress icon"></i>
        <i class="expand icon"></i>
        <i class="eye icon"></i>
        <i class="eye dropper icon"></i>
        <i class="eye slash icon"></i>
        <i class="eye slash outline icon"></i>
        <i class="file image icon"></i>
        <i class="file image outline icon"></i>
        <i class="film icon"></i>
        <i class="id badge icon"></i>
        <i class="id badge outline icon"></i>
        <i class="id card icon"></i>
        <i class="id card outline icon"></i>
        <i class="image icon"></i>
        <i class="image outline icon"></i>
        <i class="images icon"></i>
        <i class="images outline icon"></i>
        <i class="sliders horizontal icon"></i>
        <i class="tint icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Interfaces</h4>
      <p>Icons can represent common actions a user can take or use</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="ban icon"></i>ban</div>
        <div class="column"><i class="barcode icon"></i>barcode</div>
        <div class="column"><i class="bars icon"></i>bars</div>
        <div class="column"><i class="beer icon"></i>beer</div>
        <div class="column"><i class="bell icon"></i>bell</div>
        <div class="column"><i class="bell outline icon"></i>bell outline</div>
        <div class="column"><i class="bell slash icon"></i>bell slash</div>
        <div class="column"><i class="bell slash outline icon"></i>bell slash outline</div>
        <div class="column"><i class="bug icon"></i>bug</div>
        <div class="column"><i class="bullhorn icon"></i>bullhorn</div>
        <div class="column"><i class="bullseye icon"></i>bullseye</div>
        <div class="column"><i class="calculator icon"></i>calculator</div>
        <div class="column"><i class="calendar icon"></i>calendar</div>
        <div class="column"><i class="calendar outline icon"></i>calendar outline</div>
        <div class="column"><i class="calendar alternate icon"></i>calendar alternate</div>
        <div class="column"><i class="calendar alternate outline icon"></i>calendar alternate outline</div>
        <div class="column"><i class="calendar check icon"></i>calendar check</div>
        <div class="column"><i class="calendar check outline icon"></i>calendar check outline</div>
        <div class="column"><i class="calendar minus icon"></i>calendar minus</div>
        <div class="column"><i class="calendar minus outline icon"></i>calendar minus outline</div>
        <div class="column"><i class="calendar plus icon"></i>calendar plus</div>
        <div class="column"><i class="calendar plus outline icon"></i>calendar plus outline</div>
        <div class="column"><i class="calendar times icon"></i>calendar times</div>
        <div class="column"><i class="calendar times outline icon"></i>calendar times outline</div>
        <div class="column"><i class="certificate icon"></i>certificate</div>
        <div class="column"><i class="check icon"></i>check</div>
        <div class="column"><i class="check circle icon"></i>check circle</div>
        <div class="column"><i class="check circle outline icon"></i>check circle outline</div>
        <div class="column"><i class="check square icon"></i>check square</div>
        <div class="column"><i class="check square outline icon"></i>check square outline</div>
        <div class="column"><i class="circle icon"></i>circle</div>
        <div class="column"><i class="circle outline icon"></i>circle outline</div>
        <div class="column"><i class="clipboard icon"></i>clipboard</div>
        <div class="column"><i class="clipboard outline icon"></i>clipboard outline</div>
        <div class="column"><i class="clone icon"></i>clone</div>
        <div class="column"><i class="clone outline icon"></i>clone outline</div>
        <div class="column"><i class="cloud icon"></i>cloud</div>
        <div class="column"><i class="cloud download icon"></i>cloud download</div>
        <div class="column"><i class="cloud upload icon"></i>cloud upload</div>
        <div class="column"><i class="close icon"></i>close icon</div>
        <div class="column"><i class="coffee icon"></i>coffee</div>
        <div class="column"><i class="cog icon"></i>cog</div>
        <div class="column"><i class="cogs icon"></i>cogs</div>
        <div class="column"><i class="copy icon"></i>copy</div>
        <div class="column"><i class="copy outline icon"></i>copy outline</div>
        <div class="column"><i class="cut icon"></i>cut</div>
        <div class="column"><i class="database icon"></i>database</div>
        <div class="column"><i class="dot circle icon"></i>dot circle</div>
        <div class="column"><i class="dot circle outline icon"></i>dot circle outline</div>
        <div class="column"><i class="download icon"></i>download</div>
        <div class="column"><i class="edit icon"></i>edit</div>
        <div class="column"><i class="edit outline icon"></i>edit outline</div>
        <div class="column"><i class="ellipsis horizontal icon"></i>ellipsis horizontal</div>
        <div class="column"><i class="ellipsis vertical icon"></i>ellipsis vertical</div>
        <div class="column"><i class="envelope icon"></i>envelope</div>
        <div class="column"><i class="envelope outline icon"></i>envelope outline</div>
        <div class="column"><i class="envelope open icon"></i>envelope open</div>
        <div class="column"><i class="envelope open outline icon"></i>envelope open outline</div>
        <div class="column"><i class="eraser icon"></i>eraser</div>
        <div class="column"><i class="exclamation icon"></i>exclamation</div>
        <div class="column"><i class="exclamation circle icon"></i>exclamation circle</div>
        <div class="column"><i class="exclamation triangle icon"></i>exclamation triangle</div>
        <div class="column"><i class="external alternate icon"></i>external alternate</div>
        <div class="column"><i class="external square alternate icon"></i>external square alternate</div>
        <div class="column"><i class="eye icon"></i>eye</div>
        <div class="column"><i class="eye slash icon"></i>eye slash</div>
        <div class="column"><i class="eye slash outline icon"></i>eye slash outline</div>
        <div class="column"><i class="file icon"></i>file</div>
        <div class="column"><i class="file outline icon"></i>file outline</div>
        <div class="column"><i class="file alternate icon"></i>file alternate</div>
        <div class="column"><i class="file alternate outline icon"></i>file alternate outline</div>
        <div class="column"><i class="filter icon"></i>filter</div>
        <div class="column"><i class="flag icon"></i>flag</div>
        <div class="column"><i class="flag outline icon"></i>flag outline</div>
        <div class="column"><i class="flag checkered icon"></i>flag checkered</div>
        <div class="column"><i class="folder icon"></i>folder</div>
        <div class="column"><i class="folder outline icon"></i>folder outline</div>
        <div class="column"><i class="folder open icon"></i>folder open</div>
        <div class="column"><i class="folder open outline icon"></i>folder open outline</div>
        <div class="column"><i class="frown icon"></i>frown</div>
        <div class="column"><i class="frown outline icon"></i>frown outline</div>
        <div class="column"><i class="hashtag icon"></i>hashtag</div>
        <div class="column"><i class="heart icon"></i>heart</div>
        <div class="column"><i class="heart outline icon"></i>heart outline</div>
        <div class="column"><i class="history icon"></i>history</div>
        <div class="column"><i class="home icon"></i>home</div>
        <div class="column"><i class="i cursor icon"></i>i cursor</div>
        <div class="column"><i class="info icon"></i>info</div>
        <div class="column"><i class="info circle icon"></i>info circle</div>
        <div class="column"><i class="language icon"></i>language</div>
        <div class="column"><i class="magic icon"></i>magic</div>
        <div class="column"><i class="meh icon"></i>meh</div>
        <div class="column"><i class="meh outline icon"></i>meh outline</div>
        <div class="column"><i class="microphone icon"></i>microphone</div>
        <div class="column"><i class="microphone slash icon"></i>microphone slash</div>
        <div class="column"><i class="minus icon"></i>minus</div>
        <div class="column"><i class="minus circle icon"></i>minus circle</div>
        <div class="column"><i class="minus square icon"></i>minus square</div>
        <div class="column"><i class="minus square outline icon"></i>minus square outline</div>
        <div class="column"><i class="paste icon"></i>paste</div>
        <div class="column"><i class="pencil alternate icon"></i>pencil alternate</div>
        <div class="column"><i class="plus icon"></i>plus</div>
        <div class="column"><i class="plus circle icon"></i>plus circle</div>
        <div class="column"><i class="plus square icon"></i>plus square</div>
        <div class="column"><i class="plus square outline icon"></i>plus square outline</div>
        <div class="column"><i class="qrcode icon"></i>qrcode</div>
        <div class="column"><i class="question icon"></i>question</div>
        <div class="column"><i class="question circle icon"></i>question circle</div>
        <div class="column"><i class="question circle outline icon"></i>question circle outline</div>
        <div class="column"><i class="quote left icon"></i>quote left</div>
        <div class="column"><i class="quote right icon"></i>quote right</div>
        <div class="column"><i class="redo icon"></i>redo</div>
        <div class="column"><i class="redo alternate icon"></i>redo alternate</div>
        <div class="column"><i class="reply icon"></i>reply</div>
        <div class="column"><i class="reply all icon"></i>reply all</div>
        <div class="column"><i class="rss icon"></i>rss</div>
        <div class="column"><i class="rss square icon"></i>rss square</div>
        <div class="column"><i class="save icon"></i>save</div>
        <div class="column"><i class="save outline icon"></i>save outline</div>
        <div class="column"><i class="search icon"></i>search</div>
        <div class="column"><i class="search minus icon"></i>search minus</div>
        <div class="column"><i class="search plus icon"></i>search plus</div>
        <div class="column"><i class="share icon"></i>share</div>
        <div class="column"><i class="share alternate icon"></i>share alternate</div>
        <div class="column"><i class="share alternate square icon"></i>share alternate square</div>
        <div class="column"><i class="share square icon"></i>share square</div>
        <div class="column"><i class="share square outline icon"></i>share square outline</div>
        <div class="column"><i class="shield alternate icon"></i>shield alternate</div>
        <div class="column"><i class="sign-in icon"></i>sign-in</div>
        <div class="column"><i class="sign-out icon"></i>sign-out</div>
        <div class="column"><i class="signal icon"></i>signal</div>
        <div class="column"><i class="sitemap icon"></i>sitemap</div>
        <div class="column"><i class="sliders horizontal icon"></i>sliders horizontal</div>
        <div class="column"><i class="smile icon"></i>smile</div>
        <div class="column"><i class="smile outline icon"></i>smile outline</div>
        <div class="column"><i class="sort icon"></i>sort</div>
        <div class="column"><i class="sort alphabet down icon"></i>sort alphabet down</div>
        <div class="column"><i class="sort alphabet up icon"></i>sort alphabet up</div>
        <div class="column"><i class="sort amount down icon"></i>sort amount down</div>
        <div class="column"><i class="sort amount up icon"></i>sort amount up</div>
        <div class="column"><i class="sort down icon"></i>sort down</div>
        <div class="column"><i class="sort numeric down icon"></i>sort numeric down</div>
        <div class="column"><i class="sort numeric up icon"></i>sort numeric up</div>
        <div class="column"><i class="sort up icon"></i>sort up</div>
        <div class="column"><i class="star icon"></i>star</div>
        <div class="column"><i class="star outline icon"></i>star outline</div>
        <div class="column"><i class="star half icon"></i>star half</div>
        <div class="column"><i class="star half outline icon"></i>star half outline</div>
        <div class="column"><i class="sync icon"></i>sync</div>
        <div class="column"><i class="sync alternate icon"></i>sync alternate</div>
        <div class="column"><i class="thumbs down icon"></i>thumbs down</div>
        <div class="column"><i class="thumbs down outline icon"></i>thumbs down outline</div>
        <div class="column"><i class="thumbs up icon"></i>thumbs up</div>
        <div class="column"><i class="thumbs up outline icon"></i>thumbs up outline</div>
        <div class="column"><i class="times icon"></i>times</div>
        <div class="column"><i class="times circle icon"></i>times circle</div>
        <div class="column"><i class="times circle outline icon"></i>times circle outline</div>
        <div class="column"><i class="toggle off icon"></i>toggle off</div>
        <div class="column"><i class="toggle on icon"></i>toggle on</div>
        <div class="column"><i class="trash icon"></i>trash</div>
        <div class="column"><i class="trash alternate icon"></i>trash alternate</div>
        <div class="column"><i class="trash alternate outline icon"></i>trash alternate outline</div>
        <div class="column"><i class="trophy icon"></i>trophy</div>
        <div class="column"><i class="undo icon"></i>undo</div>
        <div class="column"><i class="undo alternate icon"></i>undo alternate</div>
        <div class="column"><i class="upload icon"></i>upload</div>
        <div class="column"><i class="user icon"></i>user</div>
        <div class="column"><i class="user outline icon"></i>user outline</div>
        <div class="column"><i class="user circle icon"></i>user circle</div>
        <div class="column"><i class="user circle outline icon"></i>user circle outline</div>
        <div class="column"><i class="wifi icon"></i>wifi</div>
        <div class="column"><i class="x icon"></i>x icon</div>
      </div>
      <div class="existing code">
        <i class="ban icon"></i>
        <i class="barcode icon"></i>
        <i class="bars icon"></i>
        <i class="beer icon"></i>
        <i class="bell icon"></i>
        <i class="bell outline icon"></i>
        <i class="bell slash icon"></i>
        <i class="bell slash outline icon"></i>
        <i class="bug icon"></i>
        <i class="bullhorn icon"></i>
        <i class="bullseye icon"></i>
        <i class="calculator icon"></i>
        <i class="calendar icon"></i>
        <i class="calendar outline icon"></i>
        <i class="calendar alternate icon"></i>
        <i class="calendar alternate outline icon"></i>
        <i class="calendar check icon"></i>
        <i class="calendar check outline icon"></i>
        <i class="calendar minus icon"></i>
        <i class="calendar minus outline icon"></i>
        <i class="calendar plus icon"></i>
        <i class="calendar plus outline icon"></i>
        <i class="calendar times icon"></i>
        <i class="calendar times outline icon"></i>
        <i class="certificate icon"></i>
        <i class="check icon"></i>
        <i class="check circle icon"></i>
        <i class="check circle outline icon"></i>
        <i class="check square icon"></i>
        <i class="check square outline icon"></i>
        <i class="circle icon"></i>
        <i class="circle outline icon"></i>
        <i class="clipboard icon"></i>
        <i class="clipboard outline icon"></i>
        <i class="clone icon"></i>
        <i class="clone outline icon"></i>
        <i class="cloud icon"></i>
        <i class="cloud download icon"></i>
        <i class="cloud upload icon"></i>
        <i class="coffee icon"></i>
        <i class="cog icon"></i>
        <i class="cogs icon"></i>
        <i class="copy icon"></i>
        <i class="copy outline icon"></i>
        <i class="cut icon"></i>
        <i class="database icon"></i>
        <i class="dot circle icon"></i>
        <i class="dot circle outline icon"></i>
        <i class="download icon"></i>
        <i class="edit icon"></i>
        <i class="edit outline icon"></i>
        <i class="ellipsis horizontal icon"></i>
        <i class="ellipsis vertical icon"></i>
        <i class="envelope icon"></i>
        <i class="envelope outline icon"></i>
        <i class="envelope open icon"></i>
        <i class="envelope open outline icon"></i>
        <i class="eraser icon"></i>
        <i class="exclamation icon"></i>
        <i class="exclamation circle icon"></i>
        <i class="exclamation triangle icon"></i>
        <i class="external alternate icon"></i>
        <i class="external square alternate icon"></i>
        <i class="eye icon"></i>
        <i class="eye slash icon"></i>
        <i class="eye slash outline icon"></i>
        <i class="file icon"></i>
        <i class="file outline icon"></i>
        <i class="file alternate icon"></i>
        <i class="file alternate outline icon"></i>
        <i class="filter icon"></i>
        <i class="flag icon"></i>
        <i class="flag outline icon"></i>
        <i class="flag checkered icon"></i>
        <i class="folder icon"></i>
        <i class="folder outline icon"></i>
        <i class="folder open icon"></i>
        <i class="folder open outline icon"></i>
        <i class="frown icon"></i>
        <i class="frown outline icon"></i>
        <i class="hashtag icon"></i>
        <i class="heart icon"></i>
        <i class="heart outline icon"></i>
        <i class="history icon"></i>
        <i class="home icon"></i>
        <i class="i cursor icon"></i>
        <i class="info icon"></i>
        <i class="info circle icon"></i>
        <i class="language icon"></i>
        <i class="magic icon"></i>
        <i class="meh icon"></i>
        <i class="meh outline icon"></i>
        <i class="microphone icon"></i>
        <i class="microphone slash icon"></i>
        <i class="minus icon"></i>
        <i class="minus circle icon"></i>
        <i class="minus square icon"></i>
        <i class="minus square outline icon"></i>
        <i class="paste icon"></i>
        <i class="pencil alternate icon"></i>
        <i class="plus icon"></i>
        <i class="plus circle icon"></i>
        <i class="plus square icon"></i>
        <i class="plus square outline icon"></i>
        <i class="qrcode icon"></i>
        <i class="question icon"></i>
        <i class="question circle icon"></i>
        <i class="question circle outline icon"></i>
        <i class="quote left icon"></i>
        <i class="quote right icon"></i>
        <i class="redo icon"></i>
        <i class="redo alternate icon"></i>
        <i class="reply icon"></i>
        <i class="reply all icon"></i>
        <i class="rss icon"></i>
        <i class="rss square icon"></i>
        <i class="save icon"></i>
        <i class="save outline icon"></i>
        <i class="search icon"></i>
        <i class="search minus icon"></i>
        <i class="search plus icon"></i>
        <i class="share icon"></i>
        <i class="share alternate icon"></i>
        <i class="share alternate square icon"></i>
        <i class="share square icon"></i>
        <i class="share square outline icon"></i>
        <i class="shield alternate icon"></i>
        <i class="sign in alternate icon"></i>
        <i class="sign out alternate icon"></i>
        <i class="signal icon"></i>
        <i class="sitemap icon"></i>
        <i class="sliders horizontal icon"></i>
        <i class="smile icon"></i>
        <i class="smile outline icon"></i>
        <i class="sort icon"></i>
        <i class="sort alphabet down icon"></i>
        <i class="sort alphabet up icon"></i>
        <i class="sort amount down icon"></i>
        <i class="sort amount up icon"></i>
        <i class="sort down icon"></i>
        <i class="sort numeric down icon"></i>
        <i class="sort numeric up icon"></i>
        <i class="sort up icon"></i>
        <i class="star icon"></i>
        <i class="star outline icon"></i>
        <i class="star half icon"></i>
        <i class="star half outline icon"></i>
        <i class="sync icon"></i>
        <i class="sync alternate icon"></i>
        <i class="thumbs down icon"></i>
        <i class="thumbs down outline icon"></i>
        <i class="thumbs up icon"></i>
        <i class="thumbs up outline icon"></i>
        <i class="times icon"></i>
        <i class="times circle icon"></i>
        <i class="times circle outline icon"></i>
        <i class="toggle off icon"></i>
        <i class="toggle on icon"></i>
        <i class="trash icon"></i>
        <i class="trash alternate icon"></i>
        <i class="trash alternate outline icon"></i>
        <i class="trophy icon"></i>
        <i class="undo icon"></i>
        <i class="undo alternate icon"></i>
        <i class="upload icon"></i>
        <i class="user icon"></i>
        <i class="user outline icon"></i>
        <i class="user circle icon"></i>
        <i class="user circle outline icon"></i>
        <i class="wifi icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Logistics</h4>
      <p>Icons can represent common logistic activity</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="box icon"></i>box</div>
        <div class="column"><i class="boxes icon"></i>boxes</div>
        <div class="column"><i class="clipboard check icon"></i>clipboard check</div>
        <div class="column"><i class="clipboard list icon"></i>clipboard list</div>
        <div class="column"><i class="dolly icon"></i>dolly</div>
        <div class="column"><i class="dolly flatbed icon"></i>dolly flatbed</div>
        <div class="column"><i class="pallet icon"></i>pallet</div>
        <div class="column"><i class="shipping fast icon"></i>shipping fast</div>
        <div class="column"><i class="truck icon"></i>truck</div>
        <div class="column"><i class="warehouse icon"></i>warehouse</div>
      </div>
      <div class="existing code">
        <i class="box icon"></i>
        <i class="boxes icon"></i>
        <i class="clipboard check icon"></i>
        <i class="clipboard list icon"></i>
        <i class="dolly icon"></i>
        <i class="dolly flatbed icon"></i>
        <i class="pallet icon"></i>
        <i class="shipping fast icon"></i>
        <i class="truck icon"></i>
        <i class="warehouse icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Maps</h4>
      <p>Icons can be used to represent elements on a map</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="ambulance icon"></i>ambulance</div>
        <div class="column"><i class="anchor icon"></i>anchor</div>
        <div class="column"><i class="balance scale icon"></i>balance scale</div>
        <div class="column"><i class="bath icon"></i>bath</div>
        <div class="column"><i class="bed icon"></i>bed</div>
        <div class="column"><i class="beer icon"></i>beer</div>
        <div class="column"><i class="bell icon"></i>bell</div>
        <div class="column"><i class="bell outline icon"></i>bell outline</div>
        <div class="column"><i class="bell slash icon"></i>bell slash</div>
        <div class="column"><i class="bell slash outline icon"></i>bell slash outline</div>
        <div class="column"><i class="bicycle icon"></i>bicycle</div>
        <div class="column"><i class="binoculars icon"></i>binoculars</div>
        <div class="column"><i class="birthday cake icon"></i>birthday cake</div>
        <div class="column"><i class="blind icon"></i>blind</div>
        <div class="column"><i class="bomb icon"></i>bomb</div>
        <div class="column"><i class="book icon"></i>book</div>
        <div class="column"><i class="bookmark icon"></i>bookmark</div>
        <div class="column"><i class="bookmark outline icon"></i>bookmark outline</div>
        <div class="column"><i class="briefcase icon"></i>briefcase</div>
        <div class="column"><i class="building icon"></i>building</div>
        <div class="column"><i class="building outline icon"></i>building outline</div>
        <div class="column"><i class="car icon"></i>car</div>
        <div class="column"><i class="coffee icon"></i>coffee</div>
        <div class="column"><i class="crosshairs icon"></i>crosshairs</div>
        <div class="column"><i class="dollar sign icon"></i>dollar sign</div>
        <div class="column"><i class="eye icon"></i>eye</div>
        <div class="column"><i class="eye slash icon"></i>eye slash</div>
        <div class="column"><i class="eye slash outline icon"></i>eye slash outline</div>
        <div class="column"><i class="fighter jet icon"></i>fighter jet</div>
        <div class="column"><i class="fire icon"></i>fire</div>
        <div class="column"><i class="fire extinguisher icon"></i>fire extinguisher</div>
        <div class="column"><i class="flag icon"></i>flag</div>
        <div class="column"><i class="flag outline icon"></i>flag outline</div>
        <div class="column"><i class="flag checkered icon"></i>flag checkered</div>
        <div class="column"><i class="flask icon"></i>flask</div>
        <div class="column"><i class="gamepad icon"></i>gamepad</div>
        <div class="column"><i class="gavel icon"></i>gavel</div>
        <div class="column"><i class="gift icon"></i>gift</div>
        <div class="column"><i class="glass martini icon"></i>glass martini</div>
        <div class="column"><i class="globe icon"></i>globe</div>
        <div class="column"><i class="graduation cap icon"></i>graduation cap</div>
        <div class="column"><i class="h square icon"></i>h square</div>
        <div class="column"><i class="heart icon"></i>heart</div>
        <div class="column"><i class="heart outline icon"></i>heart outline</div>
        <div class="column"><i class="heartbeat icon"></i>heartbeat</div>
        <div class="column"><i class="home icon"></i>home</div>
        <div class="column"><i class="hospital icon"></i>hospital</div>
        <div class="column"><i class="hospital outline icon"></i>hospital outline</div>
        <div class="column"><i class="image icon"></i>image</div>
        <div class="column"><i class="image outline icon"></i>image outline</div>
        <div class="column"><i class="images icon"></i>images</div>
        <div class="column"><i class="images outline icon"></i>images outline</div>
        <div class="column"><i class="industry icon"></i>industry</div>
        <div class="column"><i class="info icon"></i>info</div>
        <div class="column"><i class="info circle icon"></i>info circle</div>
        <div class="column"><i class="key icon"></i>key</div>
        <div class="column"><i class="leaf icon"></i>leaf</div>
        <div class="column"><i class="lemon icon"></i>lemon</div>
        <div class="column"><i class="lemon outline icon"></i>lemon outline</div>
        <div class="column"><i class="life ring icon"></i>life ring</div>
        <div class="column"><i class="life ring outline icon"></i>life ring outline</div>
        <div class="column"><i class="lightbulb icon"></i>lightbulb</div>
        <div class="column"><i class="lightbulb outline icon"></i>lightbulb outline</div>
        <div class="column"><i class="location arrow icon"></i>location arrow</div>
        <div class="column"><i class="low vision icon"></i>low vision</div>
        <div class="column"><i class="magnet icon"></i>magnet</div>
        <div class="column"><i class="male icon"></i>male</div>
        <div class="column"><i class="map icon"></i>map</div>
        <div class="column"><i class="map outline icon"></i>map outline</div>
        <div class="column"><i class="map marker icon"></i>map marker</div>
        <div class="column"><i class="map marker alternate icon"></i>map marker alternate</div>
        <div class="column"><i class="map pin icon"></i>map pin</div>
        <div class="column"><i class="map signs icon"></i>map signs</div>
        <div class="column"><i class="medkit icon"></i>medkit</div>
        <div class="column"><i class="money bill alternate icon"></i>money bill alternate</div>
        <div class="column"><i class="money bill alternate outline icon"></i>money bill alternate outline</div>
        <div class="column"><i class="motorcycle icon"></i>motorcycle</div>
        <div class="column"><i class="music icon"></i>music</div>
        <div class="column"><i class="newspaper icon"></i>newspaper</div>
        <div class="column"><i class="newspaper outline icon"></i>newspaper outline</div>
        <div class="column"><i class="paw icon"></i>paw</div>
        <div class="column"><i class="phone icon"></i>phone</div>
        <div class="column"><i class="phone square icon"></i>phone square</div>
        <div class="column"><i class="phone volume icon"></i>phone volume</div>
        <div class="column"><i class="plane icon"></i>plane</div>
        <div class="column"><i class="plug icon"></i>plug</div>
        <div class="column"><i class="plus icon"></i>plus</div>
        <div class="column"><i class="plus square icon"></i>plus square</div>
        <div class="column"><i class="plus square outline icon"></i>plus square outline</div>
        <div class="column"><i class="print icon"></i>print</div>
        <div class="column"><i class="recycle icon"></i>recycle</div>
        <div class="column"><i class="road icon"></i>road</div>
        <div class="column"><i class="rocket icon"></i>rocket</div>
        <div class="column"><i class="search icon"></i>search</div>
        <div class="column"><i class="search minus icon"></i>search minus</div>
        <div class="column"><i class="search plus icon"></i>search plus</div>
        <div class="column"><i class="ship icon"></i>ship</div>
        <div class="column"><i class="shopping bag icon"></i>shopping bag</div>
        <div class="column"><i class="shopping basket icon"></i>shopping basket</div>
        <div class="column"><i class="shopping cart icon"></i>shopping cart</div>
        <div class="column"><i class="shower icon"></i>shower</div>
        <div class="column"><i class="street view icon"></i>street view</div>
        <div class="column"><i class="subway icon"></i>subway</div>
        <div class="column"><i class="suitcase icon"></i>suitcase</div>
        <div class="column"><i class="tag icon"></i>tag</div>
        <div class="column"><i class="tags icon"></i>tags</div>
        <div class="column"><i class="taxi icon"></i>taxi</div>
        <div class="column"><i class="thumbtack icon"></i>thumbtack</div>
        <div class="column"><i class="ticket alternate icon"></i>ticket alternate</div>
        <div class="column"><i class="tint icon"></i>tint</div>
        <div class="column"><i class="train icon"></i>train</div>
        <div class="column"><i class="tree icon"></i>tree</div>
        <div class="column"><i class="trophy icon"></i>trophy</div>
        <div class="column"><i class="truck icon"></i>truck</div>
        <div class="column"><i class="tty icon"></i>tty</div>
        <div class="column"><i class="umbrella icon"></i>umbrella</div>
        <div class="column"><i class="university icon"></i>university</div>
        <div class="column"><i class="utensil spoon icon"></i>utensil spoon</div>
        <div class="column"><i class="utensils icon"></i>utensils</div>
        <div class="column"><i class="wheelchair icon"></i>wheelchair</div>
        <div class="column"><i class="wifi icon"></i>wifi</div>
        <div class="column"><i class="wrench icon"></i>wrench</div>
      </div>
      <div class="existing code">
        <i class="ambulance icon"></i>
        <i class="anchor icon"></i>
        <i class="balance scale icon"></i>
        <i class="bath icon"></i>
        <i class="bed icon"></i>
        <i class="beer icon"></i>
        <i class="bell icon"></i>
        <i class="bell outline icon"></i>
        <i class="bell slash icon"></i>
        <i class="bell slash outline icon"></i>
        <i class="bicycle icon"></i>
        <i class="binoculars icon"></i>
        <i class="birthday cake icon"></i>
        <i class="blind icon"></i>
        <i class="bomb icon"></i>
        <i class="book icon"></i>
        <i class="bookmark icon"></i>
        <i class="bookmark outline icon"></i>
        <i class="briefcase icon"></i>
        <i class="building icon"></i>
        <i class="building outline icon"></i>
        <i class="car icon"></i>
        <i class="coffee icon"></i>
        <i class="crosshairs icon"></i>
        <i class="dollar sign icon"></i>
        <i class="eye icon"></i>
        <i class="eye slash icon"></i>
        <i class="eye slash outline icon"></i>
        <i class="fighter jet icon"></i>
        <i class="fire icon"></i>
        <i class="fire extinguisher icon"></i>
        <i class="flag icon"></i>
        <i class="flag outline icon"></i>
        <i class="flag checkered icon"></i>
        <i class="flask icon"></i>
        <i class="gamepad icon"></i>
        <i class="gavel icon"></i>
        <i class="gift icon"></i>
        <i class="glass martini icon"></i>
        <i class="globe icon"></i>
        <i class="graduation cap icon"></i>
        <i class="h square icon"></i>
        <i class="heart icon"></i>
        <i class="heart outline icon"></i>
        <i class="heartbeat icon"></i>
        <i class="home icon"></i>
        <i class="hospital icon"></i>
        <i class="hospital outline icon"></i>
        <i class="image icon"></i>
        <i class="image outline icon"></i>
        <i class="images icon"></i>
        <i class="images outline icon"></i>
        <i class="industry icon"></i>
        <i class="info icon"></i>
        <i class="info circle icon"></i>
        <i class="key icon"></i>
        <i class="leaf icon"></i>
        <i class="lemon icon"></i>
        <i class="lemon outline icon"></i>
        <i class="life ring icon"></i>
        <i class="life ring outline icon"></i>
        <i class="lightbulb icon"></i>
        <i class="lightbulb outline icon"></i>
        <i class="location arrow icon"></i>
        <i class="low vision icon"></i>
        <i class="magnet icon"></i>
        <i class="male icon"></i>
        <i class="map icon"></i>
        <i class="map outline icon"></i>
        <i class="map marker icon"></i>
        <i class="map marker alternate icon"></i>
        <i class="map pin icon"></i>
        <i class="map signs icon"></i>
        <i class="medkit icon"></i>
        <i class="money bill alternate icon"></i>
        <i class="money bill alternate outline icon"></i>
        <i class="motorcycle icon"></i>
        <i class="music icon"></i>
        <i class="newspaper icon"></i>
        <i class="newspaper outline icon"></i>
        <i class="paw icon"></i>
        <i class="phone icon"></i>
        <i class="phone square icon"></i>
        <i class="phone volume icon"></i>
        <i class="plane icon"></i>
        <i class="plug icon"></i>
        <i class="plus icon"></i>
        <i class="plus square icon"></i>
        <i class="plus square outline icon"></i>
        <i class="print icon"></i>
        <i class="recycle icon"></i>
        <i class="road icon"></i>
        <i class="rocket icon"></i>
        <i class="search icon"></i>
        <i class="search minus icon"></i>
        <i class="search plus icon"></i>
        <i class="ship icon"></i>
        <i class="shopping bag icon"></i>
        <i class="shopping basket icon"></i>
        <i class="shopping cart icon"></i>
        <i class="shower icon"></i>
        <i class="street view icon"></i>
        <i class="subway icon"></i>
        <i class="suitcase icon"></i>
        <i class="tag icon"></i>
        <i class="tags icon"></i>
        <i class="taxi icon"></i>
        <i class="thumbtack icon"></i>
        <i class="ticket alternate icon"></i>
        <i class="tint icon"></i>
        <i class="train icon"></i>
        <i class="tree icon"></i>
        <i class="trophy icon"></i>
        <i class="truck icon"></i>
        <i class="tty icon"></i>
        <i class="umbrella icon"></i>
        <i class="university icon"></i>
        <i class="utensil spoon icon"></i>
        <i class="utensils icon"></i>
        <i class="wheelchair icon"></i>
        <i class="wifi icon"></i>
        <i class="wrench icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Medical</h4>
      <p>Icons can represent common medical actions</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="ambulance icon"></i>ambulance</div>
        <div class="column"><i class="band aid icon"></i>band aid</div>
        <div class="column"><i class="dna icon"></i>dna</div>
        <div class="column"><i class="first aid icon"></i>first aid</div>
        <div class="column"><i class="heart icon"></i>heart</div>
        <div class="column"><i class="heart outline icon"></i>heart outline</div>
        <div class="column"><i class="heartbeat icon"></i>heartbeat</div>
        <div class="column"><i class="hospital icon"></i>hospital</div>
        <div class="column"><i class="hospital outline icon"></i>hospital outline</div>
        <div class="column"><i class="hospital symbol icon"></i>hospital symbol</div>
        <div class="column"><i class="pills icon"></i>pills</div>
        <div class="column"><i class="plus icon"></i>plus</div>
        <div class="column"><i class="stethoscope icon"></i>stethoscope</div>
        <div class="column"><i class="syringe icon"></i>syringe</div>
        <div class="column"><i class="thermometer icon"></i>thermometer</div>
        <div class="column"><i class="user md icon"></i>user md</div>
        <div class="column"><i class="weight icon"></i>weight</div>
      </div>
      <div class="existing code">
        <i class="ambulance icon"></i>
        <i class="band aid icon"></i>
        <i class="dna icon"></i>
        <i class="first aid icon"></i>
        <i class="heart icon"></i>
        <i class="heart outline icon"></i>
        <i class="heartbeat icon"></i>
        <i class="hospital icon"></i>
        <i class="hospital outline icon"></i>
        <i class="hospital symbol icon"></i>
        <i class="pills icon"></i>
        <i class="plus icon"></i>
        <i class="stethoscope icon"></i>
        <i class="syringe icon"></i>
        <i class="thermometer icon"></i>
        <i class="user md icon"></i>
        <i class="weight icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Objects</h4>
      <p>Icons can be used to represent common objects</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="ambulance icon"></i>ambulance</div>
        <div class="column"><i class="anchor icon"></i>anchor</div>
        <div class="column"><i class="archive icon"></i>archive</div>
        <div class="column"><i class="balance scale icon"></i>balance scale</div>
        <div class="column"><i class="bath icon"></i>bath</div>
        <div class="column"><i class="bed icon"></i>bed</div>
        <div class="column"><i class="beer icon"></i>beer</div>
        <div class="column"><i class="bell icon"></i>bell</div>
        <div class="column"><i class="bell outline icon"></i>bell outline</div>
        <div class="column"><i class="bicycle icon"></i>bicycle</div>
        <div class="column"><i class="binoculars icon"></i>binoculars</div>
        <div class="column"><i class="birthday cake icon"></i>birthday cake</div>
        <div class="column"><i class="bomb icon"></i>bomb</div>
        <div class="column"><i class="book icon"></i>book</div>
        <div class="column"><i class="bookmark icon"></i>bookmark</div>
        <div class="column"><i class="bookmark outline icon"></i>bookmark outline</div>
        <div class="column"><i class="briefcase icon"></i>briefcase</div>
        <div class="column"><i class="bug icon"></i>bug</div>
        <div class="column"><i class="building icon"></i>building</div>
        <div class="column"><i class="building outline icon"></i>building outline</div>
        <div class="column"><i class="bullhorn icon"></i>bullhorn</div>
        <div class="column"><i class="bullseye icon"></i>bullseye</div>
        <div class="column"><i class="bus icon"></i>bus</div>
        <div class="column"><i class="calculator icon"></i>calculator</div>
        <div class="column"><i class="calendar icon"></i>calendar</div>
        <div class="column"><i class="calendar outline icon"></i>calendar outline</div>
        <div class="column"><i class="calendar alternate icon"></i>calendar alternate</div>
        <div class="column"><i class="calendar alternate outline icon"></i>calendar alternate outline</div>
        <div class="column"><i class="camera icon"></i>camera</div>
        <div class="column"><i class="camera retro icon"></i>camera retro</div>
        <div class="column"><i class="car icon"></i>car</div>
        <div class="column"><i class="clipboard icon"></i>clipboard</div>
        <div class="column"><i class="clipboard outline icon"></i>clipboard outline</div>
        <div class="column"><i class="cloud icon"></i>cloud</div>
        <div class="column"><i class="coffee icon"></i>coffee</div>
        <div class="column"><i class="cog icon"></i>cog</div>
        <div class="column"><i class="cogs icon"></i>cogs</div>
        <div class="column"><i class="compass icon"></i>compass</div>
        <div class="column"><i class="compass outline icon"></i>compass outline</div>
        <div class="column"><i class="copy icon"></i>copy</div>
        <div class="column"><i class="copy outline icon"></i>copy outline</div>
        <div class="column"><i class="cube icon"></i>cube</div>
        <div class="column"><i class="cubes icon"></i>cubes</div>
        <div class="column"><i class="cut icon"></i>cut</div>
        <div class="column"><i class="envelope icon"></i>envelope</div>
        <div class="column"><i class="envelope outline icon"></i>envelope outline</div>
        <div class="column"><i class="envelope open icon"></i>envelope open</div>
        <div class="column"><i class="envelope open outline icon"></i>envelope open outline</div>
        <div class="column"><i class="eraser icon"></i>eraser</div>
        <div class="column"><i class="eye icon"></i>eye</div>
        <div class="column"><i class="eye dropper icon"></i>eye dropper</div>
        <div class="column"><i class="fax icon"></i>fax</div>
        <div class="column"><i class="fighter jet icon"></i>fighter jet</div>
        <div class="column"><i class="file icon"></i>file</div>
        <div class="column"><i class="file outline icon"></i>file outline</div>
        <div class="column"><i class="file alternate icon"></i>file alternate</div>
        <div class="column"><i class="file alternate outline icon"></i>file alternate outline</div>
        <div class="column"><i class="film icon"></i>film</div>
        <div class="column"><i class="fire icon"></i>fire</div>
        <div class="column"><i class="fire extinguisher icon"></i>fire extinguisher</div>
        <div class="column"><i class="flag icon"></i>flag</div>
        <div class="column"><i class="flag outline icon"></i>flag outline</div>
        <div class="column"><i class="flag checkered icon"></i>flag checkered</div>
        <div class="column"><i class="flask icon"></i>flask</div>
        <div class="column"><i class="futbol icon"></i>futbol</div>
        <div class="column"><i class="futbol outline icon"></i>futbol outline</div>
        <div class="column"><i class="gamepad icon"></i>gamepad</div>
        <div class="column"><i class="gavel icon"></i>gavel</div>
        <div class="column"><i class="gem icon"></i>gem</div>
        <div class="column"><i class="gem outline icon"></i>gem outline</div>
        <div class="column"><i class="gift icon"></i>gift</div>
        <div class="column"><i class="glass martini icon"></i>glass martini</div>
        <div class="column"><i class="globe icon"></i>globe</div>
        <div class="column"><i class="graduation cap icon"></i>graduation cap</div>
        <div class="column"><i class="hdd icon"></i>hdd</div>
        <div class="column"><i class="hdd outline icon"></i>hdd outline</div>
        <div class="column"><i class="headphones icon"></i>headphones</div>
        <div class="column"><i class="heart icon"></i>heart</div>
        <div class="column"><i class="heart outline icon"></i>heart outline</div>
        <div class="column"><i class="home icon"></i>home</div>
        <div class="column"><i class="hospital icon"></i>hospital</div>
        <div class="column"><i class="hospital outline icon"></i>hospital outline</div>
        <div class="column"><i class="hourglass icon"></i>hourglass</div>
        <div class="column"><i class="hourglass outline icon"></i>hourglass outline</div>
        <div class="column"><i class="image icon"></i>image</div>
        <div class="column"><i class="image outline icon"></i>image outline</div>
        <div class="column"><i class="images icon"></i>images</div>
        <div class="column"><i class="images outline icon"></i>images outline</div>
        <div class="column"><i class="industry icon"></i>industry</div>
        <div class="column"><i class="key icon"></i>key</div>
        <div class="column"><i class="keyboard icon"></i>keyboard</div>
        <div class="column"><i class="keyboard outline icon"></i>keyboard outline</div>
        <div class="column"><i class="laptop icon"></i>laptop</div>
        <div class="column"><i class="leaf icon"></i>leaf</div>
        <div class="column"><i class="lemon icon"></i>lemon</div>
        <div class="column"><i class="lemon outline icon"></i>lemon outline</div>
        <div class="column"><i class="life ring icon"></i>life ring</div>
        <div class="column"><i class="life ring outline icon"></i>life ring outline</div>
        <div class="column"><i class="lightbulb icon"></i>lightbulb</div>
        <div class="column"><i class="lightbulb outline icon"></i>lightbulb outline</div>
        <div class="column"><i class="lock icon"></i>lock</div>
        <div class="column"><i class="lock open icon"></i>lock open</div>
        <div class="column"><i class="magic icon"></i>magic</div>
        <div class="column"><i class="magnet icon"></i>magnet</div>
        <div class="column"><i class="map icon"></i>map</div>
        <div class="column"><i class="map outline icon"></i>map outline</div>
        <div class="column"><i class="map marker icon"></i>map marker</div>
        <div class="column"><i class="map marker alternate icon"></i>map marker alternate</div>
        <div class="column"><i class="map pin icon"></i>map pin</div>
        <div class="column"><i class="map signs icon"></i>map signs</div>
        <div class="column"><i class="medkit icon"></i>medkit</div>
        <div class="column"><i class="microchip icon"></i>microchip</div>
        <div class="column"><i class="microphone icon"></i>microphone</div>
        <div class="column"><i class="mobile icon"></i>mobile</div>
        <div class="column"><i class="mobile alternate icon"></i>mobile alternate</div>
        <div class="column"><i class="money bill alternate icon"></i>money bill alternate</div>
        <div class="column"><i class="money bill alternate outline icon"></i>money bill alternate outline</div>
        <div class="column"><i class="moon icon"></i>moon</div>
        <div class="column"><i class="moon outline icon"></i>moon outline</div>
        <div class="column"><i class="motorcycle icon"></i>motorcycle</div>
        <div class="column"><i class="newspaper icon"></i>newspaper</div>
        <div class="column"><i class="newspaper outline icon"></i>newspaper outline</div>
        <div class="column"><i class="paint brush icon"></i>paint brush</div>
        <div class="column"><i class="paper plane icon"></i>paper plane</div>
        <div class="column"><i class="paper plane outline icon"></i>paper plane outline</div>
        <div class="column"><i class="paperclip icon"></i>paperclip</div>
        <div class="column"><i class="paste icon"></i>paste</div>
        <div class="column"><i class="paw icon"></i>paw</div>
        <div class="column"><i class="pencil alternate icon"></i>pencil alternate</div>
        <div class="column"><i class="phone icon"></i>phone</div>
        <div class="column"><i class="plane icon"></i>plane</div>
        <div class="column"><i class="plug icon"></i>plug</div>
        <div class="column"><i class="print icon"></i>print</div>
        <div class="column"><i class="puzzle piece icon"></i>puzzle piece</div>
        <div class="column"><i class="road icon"></i>road</div>
        <div class="column"><i class="rocket icon"></i>rocket</div>
        <div class="column"><i class="save icon"></i>save</div>
        <div class="column"><i class="save outline icon"></i>save outline</div>
        <div class="column"><i class="search icon"></i>search</div>
        <div class="column"><i class="shield alternate icon"></i>shield alternate</div>
        <div class="column"><i class="shopping bag icon"></i>shopping bag</div>
        <div class="column"><i class="shopping basket icon"></i>shopping basket</div>
        <div class="column"><i class="shopping cart icon"></i>shopping cart</div>
        <div class="column"><i class="shower icon"></i>shower</div>
        <div class="column"><i class="snowflake icon"></i>snowflake</div>
        <div class="column"><i class="snowflake outline icon"></i>snowflake outline</div>
        <div class="column"><i class="space shuttle icon"></i>space shuttle</div>
        <div class="column"><i class="star icon"></i>star</div>
        <div class="column"><i class="star outline icon"></i>star outline</div>
        <div class="column"><i class="sticky note icon"></i>sticky note</div>
        <div class="column"><i class="sticky note outline icon"></i>sticky note outline</div>
        <div class="column"><i class="stopwatch icon"></i>stopwatch</div>
        <div class="column"><i class="subway icon"></i>subway</div>
        <div class="column"><i class="suitcase icon"></i>suitcase</div>
        <div class="column"><i class="sun icon"></i>sun</div>
        <div class="column"><i class="sun outline icon"></i>sun outline</div>
        <div class="column"><i class="tablet icon"></i>tablet</div>
        <div class="column"><i class="tablet alternate icon"></i>tablet alternate</div>
        <div class="column"><i class="tachometer alternate icon"></i>tachometer alternate</div>
        <div class="column"><i class="tag icon"></i>tag</div>
        <div class="column"><i class="tags icon"></i>tags</div>
        <div class="column"><i class="taxi icon"></i>taxi</div>
        <div class="column"><i class="thumbtack icon"></i>thumbtack</div>
        <div class="column"><i class="ticket alternate icon"></i>ticket alternate</div>
        <div class="column"><i class="train icon"></i>train</div>
        <div class="column"><i class="trash icon"></i>trash</div>
        <div class="column"><i class="trash alternate icon"></i>trash alternate</div>
        <div class="column"><i class="trash alternate outline icon"></i>trash alternate outline</div>
        <div class="column"><i class="tree icon"></i>tree</div>
        <div class="column"><i class="trophy icon"></i>trophy</div>
        <div class="column"><i class="truck icon"></i>truck</div>
        <div class="column"><i class="tv icon"></i>tv</div>
        <div class="column"><i class="umbrella icon"></i>umbrella</div>
        <div class="column"><i class="university icon"></i>university</div>
        <div class="column"><i class="unlock icon"></i>unlock</div>
        <div class="column"><i class="unlock alternate icon"></i>unlock alternate</div>
        <div class="column"><i class="utensil spoon icon"></i>utensil spoon</div>
        <div class="column"><i class="utensils icon"></i>utensils</div>
        <div class="column"><i class="wheelchair icon"></i>wheelchair</div>
        <div class="column"><i class="wrench icon"></i>wrench</div>
      </div>
      <div class="existing code">
        <i class="ambulance icon"></i>
        <i class="anchor icon"></i>
        <i class="archive icon"></i>
        <i class="balance scale icon"></i>
        <i class="bath icon"></i>
        <i class="bed icon"></i>
        <i class="beer icon"></i>
        <i class="bell icon"></i>
        <i class="bell outline icon"></i>
        <i class="bicycle icon"></i>
        <i class="binoculars icon"></i>
        <i class="birthday cake icon"></i>
        <i class="bomb icon"></i>
        <i class="book icon"></i>
        <i class="bookmark icon"></i>
        <i class="bookmark outline icon"></i>
        <i class="briefcase icon"></i>
        <i class="bug icon"></i>
        <i class="building icon"></i>
        <i class="building outline icon"></i>
        <i class="bullhorn icon"></i>
        <i class="bullseye icon"></i>
        <i class="bus icon"></i>
        <i class="calculator icon"></i>
        <i class="calendar icon"></i>
        <i class="calendar outline icon"></i>
        <i class="calendar alternate icon"></i>
        <i class="calendar alternate outline icon"></i>
        <i class="camera icon"></i>
        <i class="camera retro icon"></i>
        <i class="car icon"></i>
        <i class="clipboard icon"></i>
        <i class="clipboard outline icon"></i>
        <i class="cloud icon"></i>
        <i class="coffee icon"></i>
        <i class="cog icon"></i>
        <i class="cogs icon"></i>
        <i class="compass icon"></i>
        <i class="compass outline icon"></i>
        <i class="copy icon"></i>
        <i class="copy outline icon"></i>
        <i class="cube icon"></i>
        <i class="cubes icon"></i>
        <i class="cut icon"></i>
        <i class="envelope icon"></i>
        <i class="envelope outline icon"></i>
        <i class="envelope open icon"></i>
        <i class="envelope open outline icon"></i>
        <i class="eraser icon"></i>
        <i class="eye icon"></i>
        <i class="eye dropper icon"></i>
        <i class="fax icon"></i>
        <i class="fighter jet icon"></i>
        <i class="file icon"></i>
        <i class="file outline icon"></i>
        <i class="file alternate icon"></i>
        <i class="file alternate outline icon"></i>
        <i class="film icon"></i>
        <i class="fire icon"></i>
        <i class="fire extinguisher icon"></i>
        <i class="flag icon"></i>
        <i class="flag outline icon"></i>
        <i class="flag checkered icon"></i>
        <i class="flask icon"></i>
        <i class="futbol icon"></i>
        <i class="futbol outline icon"></i>
        <i class="gamepad icon"></i>
        <i class="gavel icon"></i>
        <i class="gem icon"></i>
        <i class="gem outline icon"></i>
        <i class="gift icon"></i>
        <i class="glass martini icon"></i>
        <i class="globe icon"></i>
        <i class="graduation cap icon"></i>
        <i class="hdd icon"></i>
        <i class="hdd outline icon"></i>
        <i class="headphones icon"></i>
        <i class="heart icon"></i>
        <i class="heart outline icon"></i>
        <i class="home icon"></i>
        <i class="hospital icon"></i>
        <i class="hospital outline icon"></i>
        <i class="hourglass icon"></i>
        <i class="hourglass outline icon"></i>
        <i class="image icon"></i>
        <i class="image outline icon"></i>
        <i class="images icon"></i>
        <i class="images outline icon"></i>
        <i class="industry icon"></i>
        <i class="key icon"></i>
        <i class="keyboard icon"></i>
        <i class="keyboard outline icon"></i>
        <i class="laptop icon"></i>
        <i class="leaf icon"></i>
        <i class="lemon icon"></i>
        <i class="lemon outline icon"></i>
        <i class="life ring icon"></i>
        <i class="life ring outline icon"></i>
        <i class="lightbulb icon"></i>
        <i class="lightbulb outline icon"></i>
        <i class="lock icon"></i>
        <i class="lock open icon"></i>
        <i class="magic icon"></i>
        <i class="magnet icon"></i>
        <i class="map icon"></i>
        <i class="map outline icon"></i>
        <i class="map marker icon"></i>
        <i class="map marker alternate icon"></i>
        <i class="map pin icon"></i>
        <i class="map signs icon"></i>
        <i class="medkit icon"></i>
        <i class="microchip icon"></i>
        <i class="microphone icon"></i>
        <i class="mobile icon"></i>
        <i class="mobile alternate icon"></i>
        <i class="money bill alternate icon"></i>
        <i class="money bill alternate outline icon"></i>
        <i class="moon icon"></i>
        <i class="moon outline icon"></i>
        <i class="motorcycle icon"></i>
        <i class="newspaper icon"></i>
        <i class="newspaper outline icon"></i>
        <i class="paint brush icon"></i>
        <i class="paper plane icon"></i>
        <i class="paper plane outline icon"></i>
        <i class="paperclip icon"></i>
        <i class="paste icon"></i>
        <i class="paw icon"></i>
        <i class="pencil alternate icon"></i>
        <i class="phone icon"></i>
        <i class="plane icon"></i>
        <i class="plug icon"></i>
        <i class="print icon"></i>
        <i class="puzzle piece icon"></i>
        <i class="road icon"></i>
        <i class="rocket icon"></i>
        <i class="save icon"></i>
        <i class="save outline icon"></i>
        <i class="search icon"></i>
        <i class="shield alternate icon"></i>
        <i class="shopping bag icon"></i>
        <i class="shopping basket icon"></i>
        <i class="shopping cart icon"></i>
        <i class="shower icon"></i>
        <i class="snowflake icon"></i>
        <i class="snowflake outline icon"></i>
        <i class="space shuttle icon"></i>
        <i class="star icon"></i>
        <i class="star outline icon"></i>
        <i class="sticky note icon"></i>
        <i class="sticky note outline icon"></i>
        <i class="stopwatch icon"></i>
        <i class="subway icon"></i>
        <i class="suitcase icon"></i>
        <i class="sun icon"></i>
        <i class="sun outline icon"></i>
        <i class="tablet icon"></i>
        <i class="tablet alternate icon"></i>
        <i class="tachometer alternate icon"></i>
        <i class="tag icon"></i>
        <i class="tags icon"></i>
        <i class="taxi icon"></i>
        <i class="thumbtack icon"></i>
        <i class="ticket alternate icon"></i>
        <i class="train icon"></i>
        <i class="trash icon"></i>
        <i class="trash alternate icon"></i>
        <i class="trash alternate outline icon"></i>
        <i class="tree icon"></i>
        <i class="trophy icon"></i>
        <i class="truck icon"></i>
        <i class="tv icon"></i>
        <i class="umbrella icon"></i>
        <i class="university icon"></i>
        <i class="unlock icon"></i>
        <i class="unlock alternate icon"></i>
        <i class="utensil spoon icon"></i>
        <i class="utensils icon"></i>
        <i class="wheelchair icon"></i>
        <i class="wrench icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Payments & Shopping</h4>
      <p>Icons can represent common forms of payment and shopping actions</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="bell icon"></i>bell</div>
        <div class="column"><i class="bell outline icon"></i>bell outline</div>
        <div class="column"><i class="bookmark icon"></i>bookmark</div>
        <div class="column"><i class="bookmark outline icon"></i>bookmark outline</div>
        <div class="column"><i class="bullhorn icon"></i>bullhorn</div>
        <div class="column"><i class="camera icon"></i>camera</div>
        <div class="column"><i class="camera retro icon"></i>camera retro</div>
        <div class="column"><i class="cart arrow down icon"></i>cart arrow down</div>
        <div class="column"><i class="cart plus icon"></i>cart plus</div>
        <div class="column"><i class="certificate icon"></i>certificate</div>
        <div class="column"><i class="credit card icon"></i>credit card</div>
        <div class="column"><i class="credit card outline icon"></i>credit card outline</div>
        <div class="column"><i class="gem icon"></i>gem</div>
        <div class="column"><i class="gem outline icon"></i>gem outline</div>
        <div class="column"><i class="gift icon"></i>gift</div>
        <div class="column"><i class="handshake icon"></i>handshake</div>
        <div class="column"><i class="handshake outline icon"></i>handshake outline</div>
        <div class="column"><i class="heart icon"></i>heart</div>
        <div class="column"><i class="heart outline icon"></i>heart outline</div>
        <div class="column"><i class="key icon"></i>key</div>
        <div class="column"><i class="shopping bag icon"></i>shopping bag</div>
        <div class="column"><i class="shopping basket icon"></i>shopping basket</div>
        <div class="column"><i class="shopping cart icon"></i>shopping cart</div>
        <div class="column"><i class="star icon"></i>star</div>
        <div class="column"><i class="star outline icon"></i>star outline</div>
        <div class="column"><i class="tag icon"></i>tag</div>
        <div class="column"><i class="tags icon"></i>tags</div>
        <div class="column"><i class="thumbs down icon"></i>thumbs down</div>
        <div class="column"><i class="thumbs down outline icon"></i>thumbs down outline</div>
        <div class="column"><i class="thumbs up icon"></i>thumbs up</div>
        <div class="column"><i class="thumbs up outline icon"></i>thumbs up outline</div>
        <div class="column"><i class="trophy icon"></i>trophy</div>
      </div>
      <div class="existing code">
        <i class="bell icon"></i>
        <i class="bell outline icon"></i>
        <i class="bookmark icon"></i>
        <i class="bookmark outline icon"></i>
        <i class="bullhorn icon"></i>
        <i class="camera icon"></i>
        <i class="camera retro icon"></i>
        <i class="cart arrow down icon"></i>
        <i class="cart plus icon"></i>
        <i class="certificate icon"></i>
        <i class="credit card icon"></i>
        <i class="credit card outline icon"></i>
        <i class="gem icon"></i>
        <i class="gem outline icon"></i>
        <i class="gift icon"></i>
        <i class="handshake icon"></i>
        <i class="handshake outline icon"></i>
        <i class="heart icon"></i>
        <i class="heart outline icon"></i>
        <i class="key icon"></i>
        <i class="shopping bag icon"></i>
        <i class="shopping basket icon"></i>
        <i class="shopping cart icon"></i>
        <i class="star icon"></i>
        <i class="star outline icon"></i>
        <i class="tag icon"></i>
        <i class="tags icon"></i>
        <i class="thumbs down icon"></i>
        <i class="thumbs down outline icon"></i>
        <i class="thumbs up icon"></i>
        <i class="thumbs up outline icon"></i>
        <i class="trophy icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Shapes</h4>
      <p>Icons can be used to create shapes</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="bookmark icon"></i>bookmark</div>
        <div class="column"><i class="bookmark outline icon"></i>bookmark outline</div>
        <div class="column"><i class="calendar icon"></i>calendar</div>
        <div class="column"><i class="calendar outline icon"></i>calendar outline</div>
        <div class="column"><i class="certificate icon"></i>certificate</div>
        <div class="column"><i class="circle icon"></i>circle</div>
        <div class="column"><i class="circle outline icon"></i>circle outline</div>
        <div class="column"><i class="cloud icon"></i>cloud</div>
        <div class="column"><i class="comment icon"></i>comment</div>
        <div class="column"><i class="comment outline icon"></i>comment outline</div>
        <div class="column"><i class="file icon"></i>file</div>
        <div class="column"><i class="file outline icon"></i>file outline</div>
        <div class="column"><i class="folder icon"></i>folder</div>
        <div class="column"><i class="folder outline icon"></i>folder outline</div>
        <div class="column"><i class="heart icon"></i>heart</div>
        <div class="column"><i class="heart outline icon"></i>heart outline</div>
        <div class="column"><i class="map marker icon"></i>map marker</div>
        <div class="column"><i class="play icon"></i>play</div>
        <div class="column"><i class="square icon"></i>square</div>
        <div class="column"><i class="square outline icon"></i>square outline</div>
        <div class="column"><i class="star icon"></i>star</div>
        <div class="column"><i class="star outline icon"></i>star outline</div>
      </div>
      <div class="existing code">
        <i class="bookmark icon"></i>
        <i class="bookmark outline icon"></i>
        <i class="calendar icon"></i>
        <i class="calendar outline icon"></i>
        <i class="certificate icon"></i>
        <i class="circle icon"></i>
        <i class="circle outline icon"></i>
        <i class="cloud icon"></i>
        <i class="comment icon"></i>
        <i class="comment outline icon"></i>
        <i class="file icon"></i>
        <i class="file outline icon"></i>
        <i class="folder icon"></i>
        <i class="folder outline icon"></i>
        <i class="heart icon"></i>
        <i class="heart outline icon"></i>
        <i class="map marker icon"></i>
        <i class="play icon"></i>
        <i class="square icon"></i>
        <i class="square outline icon"></i>
        <i class="star icon"></i>
        <i class="star outline icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Spinners</h4>
      <p>Icons can represent loading</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="asterisk icon"></i>asterisk</div>
        <div class="column"><i class="certificate icon"></i>certificate</div>
        <div class="column"><i class="circle notch icon"></i>circle notch</div>
        <div class="column"><i class="cog icon"></i>cog</div>
        <div class="column"><i class="compass icon"></i>compass</div>
        <div class="column"><i class="compass outline icon"></i>compass outline</div>
        <div class="column"><i class="crosshairs icon"></i>crosshairs</div>
        <div class="column"><i class="life ring icon"></i>life ring</div>
        <div class="column"><i class="life ring outline icon"></i>life ring outline</div>
        <div class="column"><i class="snowflake icon"></i>snowflake</div>
        <div class="column"><i class="snowflake outline icon"></i>snowflake outline</div>
        <div class="column"><i class="spinner icon"></i>spinner</div>
        <div class="column"><i class="sun icon"></i>sun</div>
        <div class="column"><i class="sun outline icon"></i>sun outline</div>
        <div class="column"><i class="sync icon"></i>sync</div>
      </div>
      <div class="existing code">
        <i class="asterisk icon"></i>
        <i class="certificate icon"></i>
        <i class="circle notch icon"></i>
        <i class="cog icon"></i>
        <i class="compass icon"></i>
        <i class="compass outline icon"></i>
        <i class="crosshairs icon"></i>
        <i class="life ring icon"></i>
        <i class="life ring outline icon"></i>
        <i class="snowflake icon"></i>
        <i class="snowflake outline icon"></i>
        <i class="spinner icon"></i>
        <i class="sun icon"></i>
        <i class="sun outline icon"></i>
        <i class="sync icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Sports</h4>
      <p>Icons which represent sports</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="baseball ball icon"></i>baseball ball</div>
        <div class="column"><i class="basketball ball icon"></i>basketball ball</div>
        <div class="column"><i class="bowling ball icon"></i>bowling ball</div>
        <div class="column"><i class="football ball icon"></i>football ball</div>
        <div class="column"><i class="futbol icon"></i>futbol</div>
        <div class="column"><i class="futbol outline icon"></i>futbol outline</div>
        <div class="column"><i class="golf ball icon"></i>golf ball</div>
        <div class="column"><i class="hockey puck icon"></i>hockey puck</div>
        <div class="column"><i class="quidditch icon"></i>quidditch</div>
        <div class="column"><i class="table tennis icon"></i>table tennis</div>
        <div class="column"><i class="volleyball ball icon"></i>volleyball ball</div>
      </div>
      <div class="existing code">
        <i class="baseball ball icon"></i>
        <i class="basketball ball icon"></i>
        <i class="bowling ball icon"></i>
        <i class="football ball icon"></i>
        <i class="futbol icon"></i>
        <i class="futbol outline icon"></i>
        <i class="golf ball icon"></i>
        <i class="hockey puck icon"></i>
        <i class="quidditch icon"></i>
        <i class="table tennis icon"></i>
        <i class="volleyball ball icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Status</h4>
      <p>Icons can represent different states</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="ban icon"></i>ban</div>
        <div class="column"><i class="battery empty icon"></i>battery empty</div>
        <div class="column"><i class="battery full icon"></i>battery full</div>
        <div class="column"><i class="battery half icon"></i>battery half</div>
        <div class="column"><i class="battery quarter icon"></i>battery quarter</div>
        <div class="column"><i class="battery three quarters icon"></i>battery three quarters</div>
        <div class="column"><i class="bell icon"></i>bell</div>
        <div class="column"><i class="bell outline icon"></i>bell outline</div>
        <div class="column"><i class="bell slash icon"></i>bell slash</div>
        <div class="column"><i class="bell slash outline icon"></i>bell slash outline</div>
        <div class="column"><i class="calendar icon"></i>calendar</div>
        <div class="column"><i class="calendar outline icon"></i>calendar outline</div>
        <div class="column"><i class="calendar alternate icon"></i>calendar alternate</div>
        <div class="column"><i class="calendar alternate outline icon"></i>calendar alternate outline</div>
        <div class="column"><i class="calendar check icon"></i>calendar check</div>
        <div class="column"><i class="calendar check outline icon"></i>calendar check outline</div>
        <div class="column"><i class="calendar minus icon"></i>calendar minus</div>
        <div class="column"><i class="calendar minus outline icon"></i>calendar minus outline</div>
        <div class="column"><i class="calendar plus icon"></i>calendar plus</div>
        <div class="column"><i class="calendar plus outline icon"></i>calendar plus outline</div>
        <div class="column"><i class="calendar times icon"></i>calendar times</div>
        <div class="column"><i class="calendar times outline icon"></i>calendar times outline</div>
        <div class="column"><i class="cart arrow down icon"></i>cart arrow down</div>
        <div class="column"><i class="cart plus icon"></i>cart plus</div>
        <div class="column"><i class="exclamation icon"></i>exclamation</div>
        <div class="column"><i class="exclamation circle icon"></i>exclamation circle</div>
        <div class="column"><i class="exclamation triangle icon"></i>exclamation triangle</div>
        <div class="column"><i class="eye icon"></i>eye</div>
        <div class="column"><i class="eye slash icon"></i>eye slash</div>
        <div class="column"><i class="eye slash outline icon"></i>eye slash outline</div>
        <div class="column"><i class="file icon"></i>file</div>
        <div class="column"><i class="file outline icon"></i>file outline</div>
        <div class="column"><i class="file alternate icon"></i>file alternate</div>
        <div class="column"><i class="file alternate outline icon"></i>file alternate outline</div>
        <div class="column"><i class="folder icon"></i>folder</div>
        <div class="column"><i class="folder outline icon"></i>folder outline</div>
        <div class="column"><i class="folder open icon"></i>folder open</div>
        <div class="column"><i class="folder open outline icon"></i>folder open outline</div>
        <div class="column"><i class="info icon"></i>info</div>
        <div class="column"><i class="info circle icon"></i>info circle</div>
        <div class="column"><i class="lock icon"></i>lock</div>
        <div class="column"><i class="lock open icon"></i>lock open</div>
        <div class="column"><i class="minus icon"></i>minus</div>
        <div class="column"><i class="minus circle icon"></i>minus circle</div>
        <div class="column"><i class="minus square icon"></i>minus square</div>
        <div class="column"><i class="minus square outline icon"></i>minus square outline</div>
        <div class="column"><i class="plus icon"></i>plus</div>
        <div class="column"><i class="plus circle icon"></i>plus circle</div>
        <div class="column"><i class="plus square icon"></i>plus square</div>
        <div class="column"><i class="plus square outline icon"></i>plus square outline</div>
        <div class="column"><i class="question icon"></i>question</div>
        <div class="column"><i class="question circle icon"></i>question circle</div>
        <div class="column"><i class="question circle outline icon"></i>question circle outline</div>
        <div class="column"><i class="shield alternate icon"></i>shield alternate</div>
        <div class="column"><i class="shopping cart icon"></i>shopping cart</div>
        <div class="column"><i class="sign in alternate icon"></i>sign in alternate</div>
        <div class="column"><i class="sign out alternate icon"></i>sign out alternate</div>
        <div class="column"><i class="thermometer empty icon"></i>thermometer empty</div>
        <div class="column"><i class="thermometer full icon"></i>thermometer full</div>
        <div class="column"><i class="thermometer half icon"></i>thermometer half</div>
        <div class="column"><i class="thermometer quarter icon"></i>thermometer quarter</div>
        <div class="column"><i class="thermometer three quarters icon"></i>thermometer three quarters</div>
        <div class="column"><i class="thumbs down icon"></i>thumbs down</div>
        <div class="column"><i class="thumbs down outline icon"></i>thumbs down outline</div>
        <div class="column"><i class="thumbs up icon"></i>thumbs up</div>
        <div class="column"><i class="thumbs up outline icon"></i>thumbs up outline</div>
        <div class="column"><i class="toggle off icon"></i>toggle off</div>
        <div class="column"><i class="toggle on icon"></i>toggle on</div>
        <div class="column"><i class="unlock icon"></i>unlock</div>
        <div class="column"><i class="unlock alternate icon"></i>unlock alternate</div>
      </div>
      <div class="existing code">
        <i class="ban icon"></i>
        <i class="battery empty icon"></i>
        <i class="battery full icon"></i>
        <i class="battery half icon"></i>
        <i class="battery quarter icon"></i>
        <i class="battery three quarters icon"></i>
        <i class="bell icon"></i>
        <i class="bell outline icon"></i>
        <i class="bell slash icon"></i>
        <i class="bell slash outline icon"></i>
        <i class="calendar icon"></i>
        <i class="calendar outline icon"></i>
        <i class="calendar alternate icon"></i>
        <i class="calendar alternate outline icon"></i>
        <i class="calendar check icon"></i>
        <i class="calendar check outline icon"></i>
        <i class="calendar minus icon"></i>
        <i class="calendar minus outline icon"></i>
        <i class="calendar plus icon"></i>
        <i class="calendar plus outline icon"></i>
        <i class="calendar times icon"></i>
        <i class="calendar times outline icon"></i>
        <i class="cart arrow down icon"></i>
        <i class="cart plus icon"></i>
        <i class="exclamation icon"></i>
        <i class="exclamation circle icon"></i>
        <i class="exclamation triangle icon"></i>
        <i class="eye icon"></i>
        <i class="eye slash icon"></i>
        <i class="eye slash outline icon"></i>
        <i class="file icon"></i>
        <i class="file outline icon"></i>
        <i class="file alternate icon"></i>
        <i class="file alternate outline icon"></i>
        <i class="folder icon"></i>
        <i class="folder outline icon"></i>
        <i class="folder open icon"></i>
        <i class="folder open outline icon"></i>
        <i class="info icon"></i>
        <i class="info circle icon"></i>
        <i class="lock icon"></i>
        <i class="lock open icon"></i>
        <i class="minus icon"></i>
        <i class="minus circle icon"></i>
        <i class="minus square icon"></i>
        <i class="minus square outline icon"></i>
        <i class="plus icon"></i>
        <i class="plus circle icon"></i>
        <i class="plus square icon"></i>
        <i class="plus square outline icon"></i>
        <i class="question icon"></i>
        <i class="question circle icon"></i>
        <i class="question circle outline icon"></i>
        <i class="shield alternate icon"></i>
        <i class="shopping cart icon"></i>
        <i class="sign in alternate icon"></i>
        <i class="sign out alternate icon"></i>
        <i class="thermometer empty icon"></i>
        <i class="thermometer full icon"></i>
        <i class="thermometer half icon"></i>
        <i class="thermometer quarter icon"></i>
        <i class="thermometer three quarters icon"></i>
        <i class="thumbs down icon"></i>
        <i class="thumbs down outline icon"></i>
        <i class="thumbs up icon"></i>
        <i class="thumbs up outline icon"></i>
        <i class="toggle off icon"></i>
        <i class="toggle on icon"></i>
        <i class="unlock icon"></i>
        <i class="unlock alternate icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Users & People</h4>
      <p>Icons can represent users or people</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="address book icon"></i>address book</div>
        <div class="column"><i class="address book outline icon"></i>address book outline</div>
        <div class="column"><i class="address card icon"></i>address card</div>
        <div class="column"><i class="address card outline icon"></i>address card outline</div>
        <div class="column"><i class="bed icon"></i>bed</div>
        <div class="column"><i class="blind icon"></i>blind</div>
        <div class="column"><i class="child icon"></i>child</div>
        <div class="column"><i class="female icon"></i>female</div>
        <div class="column"><i class="frown icon"></i>frown</div>
        <div class="column"><i class="frown outline icon"></i>frown outline</div>
        <div class="column"><i class="id badge icon"></i>id badge</div>
        <div class="column"><i class="id badge outline icon"></i>id badge outline</div>
        <div class="column"><i class="id card icon"></i>id card</div>
        <div class="column"><i class="id card outline icon"></i>id card outline</div>
        <div class="column"><i class="male icon"></i>male</div>
        <div class="column"><i class="meh icon"></i>meh</div>
        <div class="column"><i class="meh outline icon"></i>meh outline</div>
        <div class="column"><i class="power off icon"></i>power off</div>
        <div class="column"><i class="smile icon"></i>smile</div>
        <div class="column"><i class="smile outline icon"></i>smile outline</div>
        <div class="column"><i class="street view icon"></i>street view</div>
        <div class="column"><i class="user icon"></i>user</div>
        <div class="column"><i class="user outline icon"></i>user outline</div>
        <div class="column"><i class="user circle icon"></i>user circle</div>
        <div class="column"><i class="user circle outline icon"></i>user circle outline</div>
        <div class="column"><i class="user md icon"></i>user md</div>
        <div class="column"><i class="user plus icon"></i>user plus</div>
        <div class="column"><i class="user secret icon"></i>user secret</div>
        <div class="column"><i class="user times icon"></i>user times</div>
        <div class="column"><i class="users icon"></i>users</div>
        <div class="column"><i class="wheelchair icon"></i>wheelchair</div>
      </div>
      <div class="existing code">
        <i class="address book icon"></i>
        <i class="address book outline icon"></i>
        <i class="address card icon"></i>
        <i class="address card outline icon"></i>
        <i class="bed icon"></i>
        <i class="blind icon"></i>
        <i class="child icon"></i>
        <i class="female icon"></i>
        <i class="frown icon"></i>
        <i class="frown outline icon"></i>
        <i class="id badge icon"></i>
        <i class="id badge outline icon"></i>
        <i class="id card icon"></i>
        <i class="id card outline icon"></i>
        <i class="male icon"></i>
        <i class="meh icon"></i>
        <i class="meh outline icon"></i>
        <i class="power off icon"></i>
        <i class="smile icon"></i>
        <i class="smile outline icon"></i>
        <i class="street view icon"></i>
        <i class="user icon"></i>
        <i class="user outline icon"></i>
        <i class="user circle icon"></i>
        <i class="user circle outline icon"></i>
        <i class="user md icon"></i>
        <i class="user plus icon"></i>
        <i class="user secret icon"></i>
        <i class="user times icon"></i>
        <i class="users icon"></i>
        <i class="wheelchair icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Vehicles</h4>
      <p>Icons can represent vehicles or transport</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="ambulance icon"></i>ambulance</div>
        <div class="column"><i class="bicycle icon"></i>bicycle</div>
        <div class="column"><i class="bus icon"></i>bus</div>
        <div class="column"><i class="car icon"></i>car</div>
        <div class="column"><i class="fighter jet icon"></i>fighter jet</div>
        <div class="column"><i class="motorcycle icon"></i>motorcycle</div>
        <div class="column"><i class="paper plane icon"></i>paper plane</div>
        <div class="column"><i class="paper plane outline icon"></i>paper plane outline</div>
        <div class="column"><i class="plane icon"></i>plane</div>
        <div class="column"><i class="rocket icon"></i>rocket</div>
        <div class="column"><i class="ship icon"></i>ship</div>
        <div class="column"><i class="shopping cart icon"></i>shopping cart</div>
        <div class="column"><i class="space shuttle icon"></i>space shuttle</div>
        <div class="column"><i class="subway icon"></i>subway</div>
        <div class="column"><i class="taxi icon"></i>taxi</div>
        <div class="column"><i class="train icon"></i>train</div>
        <div class="column"><i class="truck icon"></i>truck</div>
        <div class="column"><i class="wheelchair icon"></i>wheelchair</div>
      </div>
      <div class="existing code">
        <i class="ambulance icon"></i>
        <i class="bicycle icon"></i>
        <i class="bus icon"></i>
        <i class="car icon"></i>
        <i class="fighter jet icon"></i>
        <i class="motorcycle icon"></i>
        <i class="paper plane icon"></i>
        <i class="paper plane outline icon"></i>
        <i class="plane icon"></i>
        <i class="rocket icon"></i>
        <i class="ship icon"></i>
        <i class="shopping cart icon"></i>
        <i class="space shuttle icon"></i>
        <i class="subway icon"></i>
        <i class="taxi icon"></i>
        <i class="train icon"></i>
        <i class="truck icon"></i>
        <i class="wheelchair icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Writing</h4>
      <p>Icons can represent writing and editing</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="archive icon"></i>archive</div>
        <div class="column"><i class="book icon"></i>book</div>
        <div class="column"><i class="bookmark icon"></i>bookmark</div>
        <div class="column"><i class="bookmark outline icon"></i>bookmark outline</div>
        <div class="column"><i class="edit icon"></i>edit</div>
        <div class="column"><i class="edit outline icon"></i>edit outline</div>
        <div class="column"><i class="envelope icon"></i>envelope</div>
        <div class="column"><i class="envelope outline icon"></i>envelope outline</div>
        <div class="column"><i class="envelope open icon"></i>envelope open</div>
        <div class="column"><i class="envelope open outline icon"></i>envelope open outline</div>
        <div class="column"><i class="eraser icon"></i>eraser</div>
        <div class="column"><i class="file icon"></i>file</div>
        <div class="column"><i class="file outline icon"></i>file outline</div>
        <div class="column"><i class="file alternate icon"></i>file alternate</div>
        <div class="column"><i class="file alternate outline icon"></i>file alternate outline</div>
        <div class="column"><i class="folder icon"></i>folder</div>
        <div class="column"><i class="folder outline icon"></i>folder outline</div>
        <div class="column"><i class="folder open icon"></i>folder open</div>
        <div class="column"><i class="folder open outline icon"></i>folder open outline</div>
        <div class="column"><i class="keyboard icon"></i>keyboard</div>
        <div class="column"><i class="keyboard outline icon"></i>keyboard outline</div>
        <div class="column"><i class="newspaper icon"></i>newspaper</div>
        <div class="column"><i class="newspaper outline icon"></i>newspaper outline</div>
        <div class="column"><i class="paper plane icon"></i>paper plane</div>
        <div class="column"><i class="paper plane outline icon"></i>paper plane outline</div>
        <div class="column"><i class="paperclip icon"></i>paperclip</div>
        <div class="column"><i class="paragraph icon"></i>paragraph</div>
        <div class="column"><i class="pen square icon"></i>pen square</div>
        <div class="column"><i class="pencil alternate icon"></i>pencil alternate</div>
        <div class="column"><i class="quote left icon"></i>quote left</div>
        <div class="column"><i class="quote right icon"></i>quote right</div>
        <div class="column"><i class="sticky note icon"></i>sticky note</div>
        <div class="column"><i class="sticky note outline icon"></i>sticky note outline</div>
        <div class="column"><i class="thumbtack icon"></i>thumbtack</div>
      </div>
      <div class="existing code">
        <i class="archive icon"></i>
        <i class="book icon"></i>
        <i class="bookmark icon"></i>
        <i class="bookmark outline icon"></i>
        <i class="edit icon"></i>
        <i class="edit outline icon"></i>
        <i class="envelope icon"></i>
        <i class="envelope outline icon"></i>
        <i class="envelope open icon"></i>
        <i class="envelope open outline icon"></i>
        <i class="eraser icon"></i>
        <i class="file icon"></i>
        <i class="file outline icon"></i>
        <i class="file alternate icon"></i>
        <i class="file alternate outline icon"></i>
        <i class="folder icon"></i>
        <i class="folder outline icon"></i>
        <i class="folder open icon"></i>
        <i class="folder open outline icon"></i>
        <i class="keyboard icon"></i>
        <i class="keyboard outline icon"></i>
        <i class="newspaper icon"></i>
        <i class="newspaper outline icon"></i>
        <i class="paper plane icon"></i>
        <i class="paper plane outline icon"></i>
        <i class="paperclip icon"></i>
        <i class="paragraph icon"></i>
        <i class="pen square icon"></i>
        <i class="pencil alternate icon"></i>
        <i class="quote left icon"></i>
        <i class="quote right icon"></i>
        <i class="sticky note icon"></i>
        <i class="sticky note outline icon"></i>
        <i class="thumbtack icon"></i>
      </div>
    </div>

    <div class="icon example">
      <h4 class="ui header">Brands</h4>
      <p>Icons can represent logos to common brands</p>
      <div class="ui doubling five column grid">
        <div class="column"><i class="500px icon"></i>500px</div>
        <div class="column"><i class="accessible icon icon"></i>accessible icon</div>
        <div class="column"><i class="accusoft icon"></i>accusoft</div>
        <div class="column"><i class="adn icon"></i>adn</div>
        <div class="column"><i class="adversal icon"></i>adversal</div>
        <div class="column"><i class="affiliatetheme icon"></i>affiliatetheme</div>
        <div class="column"><i class="algolia icon"></i>algolia</div>
        <div class="column"><i class="amazon icon"></i>amazon</div>
        <div class="column"><i class="amazon pay icon"></i>amazon pay</div>
        <div class="column"><i class="amilia icon"></i>amilia</div>
        <div class="column"><i class="android icon"></i>android</div>
        <div class="column"><i class="angellist icon"></i>angellist</div>
        <div class="column"><i class="angrycreative icon"></i>angrycreative</div>
        <div class="column"><i class="angular icon"></i>angular</div>
        <div class="column"><i class="app store icon"></i>app store</div>
        <div class="column"><i class="app store ios icon"></i>app store ios</div>
        <div class="column"><i class="apper icon"></i>apper</div>
        <div class="column"><i class="apple icon"></i>apple</div>
        <div class="column"><i class="apple pay icon"></i>apple pay</div>
        <div class="column"><i class="asymmetrik icon"></i>asymmetrik</div>
        <div class="column"><i class="audible icon"></i>audible</div>
        <div class="column"><i class="autoprefixer icon"></i>autoprefixer</div>
        <div class="column"><i class="avianex icon"></i>avianex</div>
        <div class="column"><i class="aviato icon"></i>aviato</div>
        <div class="column"><i class="aws icon"></i>aws</div>
        <div class="column"><i class="bandcamp icon"></i>bandcamp</div>
        <div class="column"><i class="behance icon"></i>behance</div>
        <div class="column"><i class="behance square icon"></i>behance square</div>
        <div class="column"><i class="bimobject icon"></i>bimobject</div>
        <div class="column"><i class="bitbucket icon"></i>bitbucket</div>
        <div class="column"><i class="bitcoin icon"></i>bitcoin</div>
        <div class="column"><i class="bity icon"></i>bity</div>
        <div class="column"><i class="black tie icon"></i>black tie</div>
        <div class="column"><i class="blackberry icon"></i>blackberry</div>
        <div class="column"><i class="blogger icon"></i>blogger</div>
        <div class="column"><i class="blogger b icon"></i>blogger b</div>
        <div class="column"><i class="bluetooth icon"></i>bluetooth</div>
        <div class="column"><i class="bluetooth b icon"></i>bluetooth b</div>
        <div class="column"><i class="btc icon"></i>btc</div>
        <div class="column"><i class="buromobelexperte icon"></i>buromobelexperte</div>
        <div class="column"><i class="buysellads icon"></i>buysellads</div>
        <div class="column"><i class="cc amazon pay icon"></i>cc amazon pay</div>
        <div class="column"><i class="cc amex icon"></i>cc amex</div>
        <div class="column"><i class="cc apple pay icon"></i>cc apple pay</div>
        <div class="column"><i class="cc diners club icon"></i>cc diners club</div>
        <div class="column"><i class="cc discover icon"></i>cc discover</div>
        <div class="column"><i class="cc jcb icon"></i>cc jcb</div>
        <div class="column"><i class="cc mastercard icon"></i>cc mastercard</div>
        <div class="column"><i class="cc paypal icon"></i>cc paypal</div>
        <div class="column"><i class="cc stripe icon"></i>cc stripe</div>
        <div class="column"><i class="cc visa icon"></i>cc visa</div>
        <div class="column"><i class="centercode icon"></i>centercode</div>
        <div class="column"><i class="chrome icon"></i>chrome</div>
        <div class="column"><i class="cloudscale icon"></i>cloudscale</div>
        <div class="column"><i class="cloudsmith icon"></i>cloudsmith</div>
        <div class="column"><i class="cloudversify icon"></i>cloudversify</div>
        <div class="column"><i class="codepen icon"></i>codepen</div>
        <div class="column"><i class="codiepie icon"></i>codiepie</div>
        <div class="column"><i class="connectdevelop icon"></i>connectdevelop</div>
        <div class="column"><i class="contao icon"></i>contao</div>
        <div class="column"><i class="cpanel icon"></i>cpanel</div>
        <div class="column"><i class="creative commons icon"></i>creative commons</div>
        <div class="column"><i class="css3 icon"></i>css3</div>
        <div class="column"><i class="css3 alternate icon"></i>css3 alternate</div>
        <div class="column"><i class="cuttlefish icon"></i>cuttlefish</div>
        <div class="column"><i class="d and d icon"></i>d and d</div>
        <div class="column"><i class="dashcube icon"></i>dashcube</div>
        <div class="column"><i class="delicious icon"></i>delicious</div>
        <div class="column"><i class="deploydog icon"></i>deploydog</div>
        <div class="column"><i class="deskpro icon"></i>deskpro</div>
        <div class="column"><i class="deviantart icon"></i>deviantart</div>
        <div class="column"><i class="digg icon"></i>digg</div>
        <div class="column"><i class="digital ocean icon"></i>digital ocean</div>
        <div class="column"><i class="discord icon"></i>discord</div>
        <div class="column"><i class="discourse icon"></i>discourse</div>
        <div class="column"><i class="dochub icon"></i>dochub</div>
        <div class="column"><i class="docker icon"></i>docker</div>
        <div class="column"><i class="draft2digital icon"></i>draft2digital</div>
        <div class="column"><i class="dribbble icon"></i>dribbble</div>
        <div class="column"><i class="dribbble square icon"></i>dribbble square</div>
        <div class="column"><i class="dropbox icon"></i>dropbox</div>
        <div class="column"><i class="drupal icon"></i>drupal</div>
        <div class="column"><i class="dyalog icon"></i>dyalog</div>
        <div class="column"><i class="earlybirds icon"></i>earlybirds</div>
        <div class="column"><i class="edge icon"></i>edge</div>
        <div class="column"><i class="elementor icon"></i>elementor</div>
        <div class="column"><i class="ember icon"></i>ember</div>
        <div class="column"><i class="empire icon"></i>empire</div>
        <div class="column"><i class="envira icon"></i>envira</div>
        <div class="column"><i class="erlang icon"></i>erlang</div>
        <div class="column"><i class="ethereum icon"></i>ethereum</div>
        <div class="column"><i class="etsy icon"></i>etsy</div>
        <div class="column"><i class="expeditedssl icon"></i>expeditedssl</div>
        <div class="column"><i class="facebook icon"></i>facebook</div>
        <div class="column"><i class="facebook f icon"></i>facebook f</div>
        <div class="column"><i class="facebook messenger icon"></i>facebook messenger</div>
        <div class="column"><i class="facebook square icon"></i>facebook square</div>
        <div class="column"><i class="firefox icon"></i>firefox</div>
        <div class="column"><i class="first order icon"></i>first order</div>
        <div class="column"><i class="firstdraft icon"></i>firstdraft</div>
        <div class="column"><i class="flickr icon"></i>flickr</div>
        <div class="column"><i class="flipboard icon"></i>flipboard</div>
        <div class="column"><i class="fly icon"></i>fly</div>
        <div class="column"><i class="font awesome icon"></i>font awesome</div>
        <div class="column"><i class="font awesome alternate icon"></i>font awesome alternate</div>
        <div class="column"><i class="font awesome flag icon"></i>font awesome flag</div>
        <div class="column"><i class="fonticons icon"></i>fonticons</div>
        <div class="column"><i class="fonticons fi icon"></i>fonticons fi</div>
        <div class="column"><i class="fort awesome icon"></i>fort awesome</div>
        <div class="column"><i class="fort awesome alternate icon"></i>fort awesome alternate</div>
        <div class="column"><i class="forumbee icon"></i>forumbee</div>
        <div class="column"><i class="foursquare icon"></i>foursquare</div>
        <div class="column"><i class="free code camp icon"></i>free code camp</div>
        <div class="column"><i class="freebsd icon"></i>freebsd</div>
        <div class="column"><i class="get pocket icon"></i>get pocket</div>
        <div class="column"><i class="gg icon"></i>gg</div>
        <div class="column"><i class="gg circle icon"></i>gg circle</div>
        <div class="column"><i class="git icon"></i>git</div>
        <div class="column"><i class="git square icon"></i>git square</div>
        <div class="column"><i class="github icon"></i>github</div>
        <div class="column"><i class="github alternate icon"></i>github alternate</div>
        <div class="column"><i class="github square icon"></i>github square</div>
        <div class="column"><i class="gitkraken icon"></i>gitkraken</div>
        <div class="column"><i class="gitlab icon"></i>gitlab</div>
        <div class="column"><i class="gitter icon"></i>gitter</div>
        <div class="column"><i class="glide icon"></i>glide</div>
        <div class="column"><i class="glide g icon"></i>glide g</div>
        <div class="column"><i class="gofore icon"></i>gofore</div>
        <div class="column"><i class="goodreads icon"></i>goodreads</div>
        <div class="column"><i class="goodreads g icon"></i>goodreads g</div>
        <div class="column"><i class="google icon"></i>google</div>
        <div class="column"><i class="google drive icon"></i>google drive</div>
        <div class="column"><i class="google play icon"></i>google play</div>
        <div class="column"><i class="google plus icon"></i>google plus</div>
        <div class="column"><i class="google plus g icon"></i>google plus g</div>
        <div class="column"><i class="google plus square icon"></i>google plus square</div>
        <div class="column"><i class="google wallet icon"></i>google wallet</div>
        <div class="column"><i class="gratipay icon"></i>gratipay</div>
        <div class="column"><i class="grav icon"></i>grav</div>
        <div class="column"><i class="gripfire icon"></i>gripfire</div>
        <div class="column"><i class="grunt icon"></i>grunt</div>
        <div class="column"><i class="gulp icon"></i>gulp</div>
        <div class="column"><i class="hacker news icon"></i>hacker news</div>
        <div class="column"><i class="hacker news square icon"></i>hacker news square</div>
        <div class="column"><i class="hips icon"></i>hips</div>
        <div class="column"><i class="hire a helper icon"></i>hire a helper</div>
        <div class="column"><i class="hooli icon"></i>hooli</div>
        <div class="column"><i class="hotjar icon"></i>hotjar</div>
        <div class="column"><i class="houzz icon"></i>houzz</div>
        <div class="column"><i class="html5 icon"></i>html5</div>
        <div class="column"><i class="hubspot icon"></i>hubspot</div>
        <div class="column"><i class="imdb icon"></i>imdb</div>
        <div class="column"><i class="instagram icon"></i>instagram</div>
        <div class="column"><i class="internet explorer icon"></i>internet explorer</div>
        <div class="column"><i class="ioxhost icon"></i>ioxhost</div>
        <div class="column"><i class="itunes icon"></i>itunes</div>
        <div class="column"><i class="itunes note icon"></i>itunes note</div>
        <div class="column"><i class="jenkins icon"></i>jenkins</div>
        <div class="column"><i class="joget icon"></i>joget</div>
        <div class="column"><i class="joomla icon"></i>joomla</div>
        <div class="column"><i class="js icon"></i>js</div>
        <div class="column"><i class="js square icon"></i>js square</div>
        <div class="column"><i class="jsfiddle icon"></i>jsfiddle</div>
        <div class="column"><i class="keycdn icon"></i>keycdn</div>
        <div class="column"><i class="kickstarter icon"></i>kickstarter</div>
        <div class="column"><i class="kickstarter k icon"></i>kickstarter k</div>
        <div class="column"><i class="korvue icon"></i>korvue</div>
        <div class="column"><i class="laravel icon"></i>laravel</div>
        <div class="column"><i class="lastfm icon"></i>lastfm</div>
        <div class="column"><i class="lastfm square icon"></i>lastfm square</div>
        <div class="column"><i class="leanpub icon"></i>leanpub</div>
        <div class="column"><i class="less icon"></i>less</div>
        <div class="column"><i class="linechat icon"></i>linechat</div>
        <div class="column"><i class="linkedin icon"></i>linkedin</div>
        <div class="column"><i class="linkedin alternate icon"></i>linkedin alternate</div>
        <div class="column"><i class="linode icon"></i>linode</div>
        <div class="column"><i class="linux icon"></i>linux</div>
        <div class="column"><i class="lyft icon"></i>lyft</div>
        <div class="column"><i class="magento icon"></i>magento</div>
        <div class="column"><i class="maxcdn icon"></i>maxcdn</div>
        <div class="column"><i class="medapps icon"></i>medapps</div>
        <div class="column"><i class="medium icon"></i>medium</div>
        <div class="column"><i class="medium m icon"></i>medium m</div>
        <div class="column"><i class="medrt icon"></i>medrt</div>
        <div class="column"><i class="meetup icon"></i>meetup</div>
        <div class="column"><i class="microsoft icon"></i>microsoft</div>
        <div class="column"><i class="mix icon"></i>mix</div>
        <div class="column"><i class="mixcloud icon"></i>mixcloud</div>
        <div class="column"><i class="mizuni icon"></i>mizuni</div>
        <div class="column"><i class="modx icon"></i>modx</div>
        <div class="column"><i class="monero icon"></i>monero</div>
        <div class="column"><i class="napster icon"></i>napster</div>
        <div class="column"><i class="nintendo switch icon"></i>nintendo switch</div>
        <div class="column"><i class="node icon"></i>node</div>
        <div class="column"><i class="node js icon"></i>node js</div>
        <div class="column"><i class="npm icon"></i>npm</div>
        <div class="column"><i class="ns8 icon"></i>ns8</div>
        <div class="column"><i class="nutritionix icon"></i>nutritionix</div>
        <div class="column"><i class="odnoklassniki icon"></i>odnoklassniki</div>
        <div class="column"><i class="odnoklassniki square icon"></i>odnoklassniki square</div>
        <div class="column"><i class="opencart icon"></i>opencart</div>
        <div class="column"><i class="openid icon"></i>openid</div>
        <div class="column"><i class="opera icon"></i>opera</div>
        <div class="column"><i class="optin monster icon"></i>optin monster</div>
        <div class="column"><i class="osi icon"></i>osi</div>
        <div class="column"><i class="page4 icon"></i>page4</div>
        <div class="column"><i class="pagelines icon"></i>pagelines</div>
        <div class="column"><i class="palfed icon"></i>palfed</div>
        <div class="column"><i class="patreon icon"></i>patreon</div>
        <div class="column"><i class="paypal icon"></i>paypal</div>
        <div class="column"><i class="periscope icon"></i>periscope</div>
        <div class="column"><i class="phabricator icon"></i>phabricator</div>
        <div class="column"><i class="phoenix framework icon"></i>phoenix framework</div>
        <div class="column"><i class="php icon"></i>php</div>
        <div class="column"><i class="pied piper icon"></i>pied piper</div>
        <div class="column"><i class="pied piper alternate icon"></i>pied piper alternate</div>
        <div class="column"><i class="pied piper pp icon"></i>pied piper pp</div>
        <div class="column"><i class="pinterest icon"></i>pinterest</div>
        <div class="column"><i class="pinterest p icon"></i>pinterest p</div>
        <div class="column"><i class="pinterest square icon"></i>pinterest square</div>
        <div class="column"><i class="playstation icon"></i>playstation</div>
        <div class="column"><i class="product hunt icon"></i>product hunt</div>
        <div class="column"><i class="pushed icon"></i>pushed</div>
        <div class="column"><i class="python icon"></i>python</div>
        <div class="column"><i class="qq icon"></i>qq</div>
        <div class="column"><i class="quinscape icon"></i>quinscape</div>
        <div class="column"><i class="quora icon"></i>quora</div>
        <div class="column"><i class="ravelry icon"></i>ravelry</div>
        <div class="column"><i class="react icon"></i>react</div>
        <div class="column"><i class="rebel icon"></i>rebel</div>
        <div class="column"><i class="redriver icon"></i>redriver</div>
        <div class="column"><i class="reddit icon"></i>reddit</div>
        <div class="column"><i class="reddit alien icon"></i>reddit alien</div>
        <div class="column"><i class="reddit square icon"></i>reddit square</div>
        <div class="column"><i class="rendact icon"></i>rendact</div>
        <div class="column"><i class="renren icon"></i>renren</div>
        <div class="column"><i class="replyd icon"></i>replyd</div>
        <div class="column"><i class="resolving icon"></i>resolving</div>
        <div class="column"><i class="rocketchat icon"></i>rocketchat</div>
        <div class="column"><i class="rockrms icon"></i>rockrms</div>
        <div class="column"><i class="safari icon"></i>safari</div>
        <div class="column"><i class="sass icon"></i>sass</div>
        <div class="column"><i class="schlix icon"></i>schlix</div>
        <div class="column"><i class="scribd icon"></i>scribd</div>
        <div class="column"><i class="searchengin icon"></i>searchengin</div>
        <div class="column"><i class="sellcast icon"></i>sellcast</div>
        <div class="column"><i class="sellsy icon"></i>sellsy</div>
        <div class="column"><i class="servicestack icon"></i>servicestack</div>
        <div class="column"><i class="shirtsinbulk icon"></i>shirtsinbulk</div>
        <div class="column"><i class="simplybuilt icon"></i>simplybuilt</div>
        <div class="column"><i class="sistrix icon"></i>sistrix</div>
        <div class="column"><i class="skyatlas icon"></i>skyatlas</div>
        <div class="column"><i class="skype icon"></i>skype</div>
        <div class="column"><i class="slack icon"></i>slack</div>
        <div class="column"><i class="slack hash icon"></i>slack hash</div>
        <div class="column"><i class="slideshare icon"></i>slideshare</div>
        <div class="column"><i class="snapchat icon"></i>snapchat</div>
        <div class="column"><i class="snapchat ghost icon"></i>snapchat ghost</div>
        <div class="column"><i class="snapchat square icon"></i>snapchat square</div>
        <div class="column"><i class="soundcloud icon"></i>soundcloud</div>
        <div class="column"><i class="speakap icon"></i>speakap</div>
        <div class="column"><i class="spotify icon"></i>spotify</div>
        <div class="column"><i class="stack exchange icon"></i>stack exchange</div>
        <div class="column"><i class="stack overflow icon"></i>stack overflow</div>
        <div class="column"><i class="staylinked icon"></i>staylinked</div>
        <div class="column"><i class="steam icon"></i>steam</div>
        <div class="column"><i class="steam square icon"></i>steam square</div>
        <div class="column"><i class="steam symbol icon"></i>steam symbol</div>
        <div class="column"><i class="sticker mule icon"></i>sticker mule</div>
        <div class="column"><i class="strava icon"></i>strava</div>
        <div class="column"><i class="stripe icon"></i>stripe</div>
        <div class="column"><i class="stripe s icon"></i>stripe s</div>
        <div class="column"><i class="studiovinari icon"></i>studiovinari</div>
        <div class="column"><i class="stumbleupon icon"></i>stumbleupon</div>
        <div class="column"><i class="stumbleupon circle icon"></i>stumbleupon circle</div>
        <div class="column"><i class="superpowers icon"></i>superpowers</div>
        <div class="column"><i class="supple icon"></i>supple</div>
        <div class="column"><i class="telegram icon"></i>telegram</div>
        <div class="column"><i class="telegram plane icon"></i>telegram plane</div>
        <div class="column"><i class="tencent weibo icon"></i>tencent weibo</div>
        <div class="column"><i class="themeisle icon"></i>themeisle</div>
        <div class="column"><i class="trello icon"></i>trello</div>
        <div class="column"><i class="tripadvisor icon"></i>tripadvisor</div>
        <div class="column"><i class="tumblr icon"></i>tumblr</div>
        <div class="column"><i class="tumblr square icon"></i>tumblr square</div>
        <div class="column"><i class="twitch icon"></i>twitch</div>
        <div class="column"><i class="twitter icon"></i>twitter</div>
        <div class="column"><i class="twitter square icon"></i>twitter square</div>
        <div class="column"><i class="typo3 icon"></i>typo3</div>
        <div class="column"><i class="uber icon"></i>uber</div>
        <div class="column"><i class="uikit icon"></i>uikit</div>
        <div class="column"><i class="uniregistry icon"></i>uniregistry</div>
        <div class="column"><i class="untappd icon"></i>untappd</div>
        <div class="column"><i class="usb icon"></i>usb</div>
        <div class="column"><i class="ussunnah icon"></i>ussunnah</div>
        <div class="column"><i class="vaadin icon"></i>vaadin</div>
        <div class="column"><i class="viacoin icon"></i>viacoin</div>
        <div class="column"><i class="viadeo icon"></i>viadeo</div>
        <div class="column"><i class="viadeo square icon"></i>viadeo square</div>
        <div class="column"><i class="viber icon"></i>viber</div>
        <div class="column"><i class="vimeo icon"></i>vimeo</div>
        <div class="column"><i class="vimeo square icon"></i>vimeo square</div>
        <div class="column"><i class="vimeo v icon"></i>vimeo v</div>
        <div class="column"><i class="vine icon"></i>vine</div>
        <div class="column"><i class="vk icon"></i>vk</div>
        <div class="column"><i class="vnv icon"></i>vnv</div>
        <div class="column"><i class="vuejs icon"></i>vuejs</div>
        <div class="column"><i class="wechat icon"></i>wechat</div>
        <div class="column"><i class="weibo icon"></i>weibo</div>
        <div class="column"><i class="weixin icon"></i>weixin</div>
        <div class="column"><i class="whatsapp icon"></i>whatsapp</div>
        <div class="column"><i class="whatsapp square icon"></i>whatsapp square</div>
        <div class="column"><i class="whmcs icon"></i>whmcs</div>
        <div class="column"><i class="wikipedia w icon"></i>wikipedia w</div>
        <div class="column"><i class="windows icon"></i>windows</div>
        <div class="column"><i class="wordpress icon"></i>wordpress</div>
        <div class="column"><i class="wordpress simple icon"></i>wordpress simple</div>
        <div class="column"><i class="wpbeginner icon"></i>wpbeginner</div>
        <div class="column"><i class="wpexplorer icon"></i>wpexplorer</div>
        <div class="column"><i class="wpforms icon"></i>wpforms</div>
        <div class="column"><i class="xbox icon"></i>xbox</div>
        <div class="column"><i class="xing icon"></i>xing</div>
        <div class="column"><i class="xing square icon"></i>xing square</div>
        <div class="column"><i class="y combinator icon"></i>y combinator</div>
        <div class="column"><i class="yahoo icon"></i>yahoo</div>
        <div class="column"><i class="yandex icon"></i>yandex</div>
        <div class="column"><i class="yandex international icon"></i>yandex international</div>
        <div class="column"><i class="yelp icon"></i>yelp</div>
        <div class="column"><i class="yoast icon"></i>yoast</div>
        <div class="column"><i class="youtube icon"></i>youtube</div>
        <div class="column"><i class="youtube square icon"></i>youtube square</div>
      </div>
      <div class="existing code">
        <i class="500px icon"></i>
        <i class="accessible icon icon"></i>
        <i class="accusoft icon"></i>
        <i class="adn icon"></i>
        <i class="adversal icon"></i>
        <i class="affiliatetheme icon"></i>
        <i class="algolia icon"></i>
        <i class="amazon icon"></i>
        <i class="amazon pay icon"></i>
        <i class="amilia icon"></i>
        <i class="android icon"></i>
        <i class="angellist icon"></i>
        <i class="angrycreative icon"></i>
        <i class="angular icon"></i>
        <i class="app store icon"></i>
        <i class="app store ios icon"></i>
        <i class="apper icon"></i>
        <i class="apple icon"></i>
        <i class="apple pay icon"></i>
        <i class="asymmetrik icon"></i>
        <i class="audible icon"></i>
        <i class="autoprefixer icon"></i>
        <i class="avianex icon"></i>
        <i class="aviato icon"></i>
        <i class="aws icon"></i>
        <i class="bandcamp icon"></i>
        <i class="behance icon"></i>
        <i class="behance square icon"></i>
        <i class="bimobject icon"></i>
        <i class="bitbucket icon"></i>
        <i class="bitcoin icon"></i>
        <i class="bity icon"></i>
        <i class="black tie icon"></i>
        <i class="blackberry icon"></i>
        <i class="blogger icon"></i>
        <i class="blogger b icon"></i>
        <i class="bluetooth icon"></i>
        <i class="bluetooth b icon"></i>
        <i class="btc icon"></i>
        <i class="buromobelexperte icon"></i>
        <i class="buysellads icon"></i>
        <i class="cc amazon pay icon"></i>
        <i class="cc amex icon"></i>
        <i class="cc apple pay icon"></i>
        <i class="cc diners club icon"></i>
        <i class="cc discover icon"></i>
        <i class="cc jcb icon"></i>
        <i class="cc mastercard icon"></i>
        <i class="cc paypal icon"></i>
        <i class="cc stripe icon"></i>
        <i class="cc visa icon"></i>
        <i class="centercode icon"></i>
        <i class="chrome icon"></i>
        <i class="cloudscale icon"></i>
        <i class="cloudsmith icon"></i>
        <i class="cloudversify icon"></i>
        <i class="codepen icon"></i>
        <i class="codiepie icon"></i>
        <i class="connectdevelop icon"></i>
        <i class="contao icon"></i>
        <i class="cpanel icon"></i>
        <i class="creative commons icon"></i>
        <i class="css3 icon"></i>
        <i class="css3 alternate icon"></i>
        <i class="cuttlefish icon"></i>
        <i class="d and d icon"></i>
        <i class="dashcube icon"></i>
        <i class="delicious icon"></i>
        <i class="deploydog icon"></i>
        <i class="deskpro icon"></i>
        <i class="deviantart icon"></i>
        <i class="digg icon"></i>
        <i class="digital ocean icon"></i>
        <i class="discord icon"></i>
        <i class="discourse icon"></i>
        <i class="dochub icon"></i>
        <i class="docker icon"></i>
        <i class="draft2digital icon"></i>
        <i class="dribbble icon"></i>
        <i class="dribbble square icon"></i>
        <i class="dropbox icon"></i>
        <i class="drupal icon"></i>
        <i class="dyalog icon"></i>
        <i class="earlybirds icon"></i>
        <i class="edge icon"></i>
        <i class="elementor icon"></i>
        <i class="ember icon"></i>
        <i class="empire icon"></i>
        <i class="envira icon"></i>
        <i class="erlang icon"></i>
        <i class="ethereum icon"></i>
        <i class="etsy icon"></i>
        <i class="expeditedssl icon"></i>
        <i class="facebook icon"></i>
        <i class="facebook f icon"></i>
        <i class="facebook messenger icon"></i>
        <i class="facebook square icon"></i>
        <i class="firefox icon"></i>
        <i class="first order icon"></i>
        <i class="firstdraft icon"></i>
        <i class="flickr icon"></i>
        <i class="flipboard icon"></i>
        <i class="fly icon"></i>
        <i class="font awesome icon"></i>
        <i class="font awesome alternate icon"></i>
        <i class="font awesome flag icon"></i>
        <i class="fonticons icon"></i>
        <i class="fonticons fi icon"></i>
        <i class="fort awesome icon"></i>
        <i class="fort awesome alternate icon"></i>
        <i class="forumbee icon"></i>
        <i class="foursquare icon"></i>
        <i class="free code camp icon"></i>
        <i class="freebsd icon"></i>
        <i class="get pocket icon"></i>
        <i class="gg icon"></i>
        <i class="gg circle icon"></i>
        <i class="git icon"></i>
        <i class="git square icon"></i>
        <i class="github icon"></i>
        <i class="github alternate icon"></i>
        <i class="github square icon"></i>
        <i class="gitkraken icon"></i>
        <i class="gitlab icon"></i>
        <i class="gitter icon"></i>
        <i class="glide icon"></i>
        <i class="glide g icon"></i>
        <i class="gofore icon"></i>
        <i class="goodreads icon"></i>
        <i class="goodreads g icon"></i>
        <i class="google icon"></i>
        <i class="google drive icon"></i>
        <i class="google play icon"></i>
        <i class="google plus icon"></i>
        <i class="google plus g icon"></i>
        <i class="google plus square icon"></i>
        <i class="google wallet icon"></i>
        <i class="gratipay icon"></i>
        <i class="grav icon"></i>
        <i class="gripfire icon"></i>
        <i class="grunt icon"></i>
        <i class="gulp icon"></i>
        <i class="hacker news icon"></i>
        <i class="hacker news square icon"></i>
        <i class="hips icon"></i>
        <i class="hire a helper icon"></i>
        <i class="hooli icon"></i>
        <i class="hotjar icon"></i>
        <i class="houzz icon"></i>
        <i class="html5 icon"></i>
        <i class="hubspot icon"></i>
        <i class="imdb icon"></i>
        <i class="instagram icon"></i>
        <i class="internet explorer icon"></i>
        <i class="ioxhost icon"></i>
        <i class="itunes icon"></i>
        <i class="itunes note icon"></i>
        <i class="jenkins icon"></i>
        <i class="joget icon"></i>
        <i class="joomla icon"></i>
        <i class="js icon"></i>
        <i class="js square icon"></i>
        <i class="jsfiddle icon"></i>
        <i class="keycdn icon"></i>
        <i class="kickstarter icon"></i>
        <i class="kickstarter k icon"></i>
        <i class="korvue icon"></i>
        <i class="laravel icon"></i>
        <i class="lastfm icon"></i>
        <i class="lastfm square icon"></i>
        <i class="leanpub icon"></i>
        <i class="less icon"></i>
        <i class="linechat icon"></i>
        <i class="linkedin icon"></i>
        <i class="linkedin in icon"></i>
        <i class="linode icon"></i>
        <i class="linux icon"></i>
        <i class="lyft icon"></i>
        <i class="magento icon"></i>
        <i class="maxcdn icon"></i>
        <i class="medapps icon"></i>
        <i class="medium icon"></i>
        <i class="medium m icon"></i>
        <i class="medrt icon"></i>
        <i class="meetup icon"></i>
        <i class="microsoft icon"></i>
        <i class="mix icon"></i>
        <i class="mixcloud icon"></i>
        <i class="mizuni icon"></i>
        <i class="modx icon"></i>
        <i class="monero icon"></i>
        <i class="napster icon"></i>
        <i class="nintendo switch icon"></i>
        <i class="node icon"></i>
        <i class="node js icon"></i>
        <i class="npm icon"></i>
        <i class="ns8 icon"></i>
        <i class="nutritionix icon"></i>
        <i class="odnoklassniki icon"></i>
        <i class="odnoklassniki square icon"></i>
        <i class="opencart icon"></i>
        <i class="openid icon"></i>
        <i class="opera icon"></i>
        <i class="optin monster icon"></i>
        <i class="osi icon"></i>
        <i class="page4 icon"></i>
        <i class="pagelines icon"></i>
        <i class="palfed icon"></i>
        <i class="patreon icon"></i>
        <i class="paypal icon"></i>
        <i class="periscope icon"></i>
        <i class="phabricator icon"></i>
        <i class="phoenix framework icon"></i>
        <i class="php icon"></i>
        <i class="pied piper icon"></i>
        <i class="pied piper alternate icon"></i>
        <i class="pied piper pp icon"></i>
        <i class="pinterest icon"></i>
        <i class="pinterest p icon"></i>
        <i class="pinterest square icon"></i>
        <i class="playstation icon"></i>
        <i class="product hunt icon"></i>
        <i class="pushed icon"></i>
        <i class="python icon"></i>
        <i class="qq icon"></i>
        <i class="quinscape icon"></i>
        <i class="quora icon"></i>
        <i class="ravelry icon"></i>
        <i class="react icon"></i>
        <i class="rebel icon"></i>
        <i class="redriver icon"></i>
        <i class="reddit icon"></i>
        <i class="reddit alien icon"></i>
        <i class="reddit square icon"></i>
        <i class="rendact icon"></i>
        <i class="renren icon"></i>
        <i class="replyd icon"></i>
        <i class="resolving icon"></i>
        <i class="rocketchat icon"></i>
        <i class="rockrms icon"></i>
        <i class="safari icon"></i>
        <i class="sass icon"></i>
        <i class="schlix icon"></i>
        <i class="scribd icon"></i>
        <i class="searchengin icon"></i>
        <i class="sellcast icon"></i>
        <i class="sellsy icon"></i>
        <i class="servicestack icon"></i>
        <i class="shirtsinbulk icon"></i>
        <i class="simplybuilt icon"></i>
        <i class="sistrix icon"></i>
        <i class="skyatlas icon"></i>
        <i class="skype icon"></i>
        <i class="slack icon"></i>
        <i class="slack hash icon"></i>
        <i class="slideshare icon"></i>
        <i class="snapchat icon"></i>
        <i class="snapchat ghost icon"></i>
        <i class="snapchat square icon"></i>
        <i class="soundcloud icon"></i>
        <i class="speakap icon"></i>
        <i class="spotify icon"></i>
        <i class="stack exchange icon"></i>
        <i class="stack overflow icon"></i>
        <i class="staylinked icon"></i>
        <i class="steam icon"></i>
        <i class="steam square icon"></i>
        <i class="steam symbol icon"></i>
        <i class="sticker mule icon"></i>
        <i class="strava icon"></i>
        <i class="stripe icon"></i>
        <i class="stripe s icon"></i>
        <i class="studiovinari icon"></i>
        <i class="stumbleupon icon"></i>
        <i class="stumbleupon circle icon"></i>
        <i class="superpowers icon"></i>
        <i class="supple icon"></i>
        <i class="telegram icon"></i>
        <i class="telegram plane icon"></i>
        <i class="tencent weibo icon"></i>
        <i class="themeisle icon"></i>
        <i class="trello icon"></i>
        <i class="tripadvisor icon"></i>
        <i class="tumblr icon"></i>
        <i class="tumblr square icon"></i>
        <i class="twitch icon"></i>
        <i class="twitter icon"></i>
        <i class="twitter square icon"></i>
        <i class="typo3 icon"></i>
        <i class="uber icon"></i>
        <i class="uikit icon"></i>
        <i class="uniregistry icon"></i>
        <i class="untappd icon"></i>
        <i class="usb icon"></i>
        <i class="ussunnah icon"></i>
        <i class="vaadin icon"></i>
        <i class="viacoin icon"></i>
        <i class="viadeo icon"></i>
        <i class="viadeo square icon"></i>
        <i class="viber icon"></i>
        <i class="vimeo icon"></i>
        <i class="vimeo square icon"></i>
        <i class="vimeo v icon"></i>
        <i class="vine icon"></i>
        <i class="vk icon"></i>
        <i class="vnv icon"></i>
        <i class="vuejs icon"></i>
        <i class="wechat icon"></i>
        <i class="weibo icon"></i>
        <i class="weixin icon"></i>
        <i class="whatsapp icon"></i>
        <i class="whatsapp square icon"></i>
        <i class="whmcs icon"></i>
        <i class="wikipedia w icon"></i>
        <i class="windows icon"></i>
        <i class="wordpress icon"></i>
        <i class="wordpress simple icon"></i>
        <i class="wpbeginner icon"></i>
        <i class="wpexplorer icon"></i>
        <i class="wpforms icon"></i>
        <i class="xbox icon"></i>
        <i class="xing icon"></i>
        <i class="xing square icon"></i>
        <i class="y combinator icon"></i>
        <i class="yahoo icon"></i>
        <i class="yandex icon"></i>
        <i class="yandex international icon"></i>
        <i class="yelp icon"></i>
        <i class="yoast icon"></i>
        <i class="youtube icon"></i>
        <i class="youtube square icon"></i>
      </div>
    </div>
  </div>

  <div class="ui tab" data-tab="definition">

    <h2 class="ui dividing header">States</h2>

    <div class="example">
      <h4 class="ui header">Disabled</h4>
      <p>An icon can show that it is disabled</p>
      <i class="disabled users icon"></i>
    </div>

    <div class="example">
      <h4 class="ui header">Loading</h4>
      <p>An icon can be used as a simple loader</p>
      <i class="spinner loading icon"></i>
      <i class="notched circle loading icon"></i>
      <i class="asterisk loading icon"></i>
    </div>


    <h2 class="ui dividing header">Variations</h2>

    <div class="example">
      <h4 class="ui header">Fitted</h4>
      <p>An icon can be fitted, without any space to the left or right of it.</p>
      Tight spacing
      <i class="fitted help icon"></i>
      Tight spacing
    </div>

    <div class="example">
      <h4 class="ui header">Size</h4>
      <p>An icon can vary in size</p>
      <i class="mini home icon"></i>
      <i class="tiny home icon"></i>
      <i class="small home icon"></i>
      <br>
      <i class="home icon"></i>
      <br>
      <i class="large home icon"></i>
      <br>
      <i class="big home icon"></i>
      <br>
      <i class="huge home icon"></i>
      <br>
      <i class="massive home icon"></i>
    </div>

    <div class="example">
      <h4 class="ui header">Link</h4>
      <p>An icon can be formatted as a link</p>
      <i class="close link icon"></i>
      <i class="help link icon"></i>
    </div>

    <div class="example">
      <h4 class="ui header">Flipped</h4>
      <p>An icon can be flipped</p>
      <i class="horizontally flipped cloud icon"></i>
      <i class="vertically flipped cloud icon"></i>
    </div>

    <div class="example">
      <h4 class="ui header">Rotated</h4>
      <p>An icon can be rotated</p>
      <i class="clockwise rotated cloud icon"></i>
      <i class="counterclockwise rotated cloud icon"></i>
    </div>


    <div class="example">
      <h4 class="ui header">Circular</h4>
      <p>An icon can be formatted to appear circular</p>
      <i class="circular users icon"></i>
      <i class="circular teal users icon"></i>
      <i class="circular inverted users icon"></i>
      <i class="circular inverted teal users icon"></i>
    </div>

    <div class="example">
      <h4 class="ui header">Bordered</h4>
      <div class="ui ignored info message">
        In <code>0.x.x</code> bordered was formally known as <code>squared</code>
      </div>
      <p>An icon can be formatted to appear bordered</p>
      <i class="bordered users icon"></i>
      <i class="bordered teal users icon"></i>
      <i class="bordered inverted black users icon"></i>
      <i class="bordered inverted teal users icon"></i>
    </div>

    <div class="example">
      <h4 class="ui header">Colored</h4>
      <p>An icon can be formatted with different colors</p>
      <i class="red users icon"></i>
      <i class="orange users icon"></i>
      <i class="yellow users icon"></i>
      <i class="olive users icon"></i>
      <i class="green users icon"></i>
      <i class="teal users icon"></i>
      <i class="blue users icon"></i>
      <i class="violet users icon"></i>
      <i class="purple users icon"></i>
      <i class="pink users icon"></i>
      <i class="brown users icon"></i>
      <i class="grey users icon"></i>
      <i class="black users icon"></i>
    </div>

    <div class="example">
      <h4 class="ui header">Inverted</h4>
      <p>An icon can have its colors inverted for contrast</p>
      <div class="ui inverted segment">
        <i class="inverted users icon"></i>
        <i class="inverted red users icon"></i>
        <i class="inverted orange users icon"></i>
        <i class="inverted yellow users icon"></i>
        <i class="inverted olive users icon"></i>
        <i class="inverted green users icon"></i>
        <i class="inverted teal users icon"></i>
        <i class="inverted blue users icon"></i>
        <i class="inverted violet users icon"></i>
        <i class="inverted purple users icon"></i>
        <i class="inverted pink users icon"></i>
        <i class="inverted brown users icon"></i>
        <i class="inverted grey users icon"></i>
      </div>
    </div>

    <h2 class="ui dividing header">Groups</h2>

    <div class="example">
      <h4 class="ui header">Icons</h4>
      <p>Several icons can be used together as a group</p>
      <i class="huge icons">
        <i class="big circle outline icon"></i>
        <i class="user icon"></i>
      </i>
    </div>
    <div class="another example">
      <i class="huge icons">
        <i class="big red dont icon"></i>
        <i class="black user icon"></i>
      </i>
    </div>
    <div class="example" data-class="corner">
      <h4 class="ui header">Corner Icon</h4>
      <p>A group of icons can display a smaller corner icon</p>
      <i class="huge icons">
        <i class="puzzle icon"></i>
        <i class="corner add icon"></i>
      </i>
    </div>
    <div class="another example">
      <i class="huge icons">
        <i class="puzzle icon"></i>
        <i class="top left corner add icon"></i>
      </i>
      <i class="huge icons">
        <i class="puzzle icon"></i>
        <i class="top right corner add icon"></i>
      </i>
      <i class="huge icons">
        <i class="puzzle icon"></i>
        <i class="bottom left corner add icon"></i>
      </i>
      <i class="huge icons">
        <i class="puzzle icon"></i>
        <i class="bottom right corner add icon"></i>
      </i>
    </div>
    <div class="another example">
      <h2 class="ui header">
        <i class="large icons">
          <i class="twitter icon"></i>
          <i class="inverted corner add icon"></i>
        </i>
        Add on Twitter
      </h2>
    </div>

  </div>

</div>
        <div class="ui  vertical footer segment">
  <div class="ui center aligned container">
    <div class="ui stackable grid">
      <div class="three wide column">
        <h4 class="ui header">Community</h4>
        <div class="ui link list">
          <a class="item" href="https://www.transifex.com/organization/semantic-org/" target="_blank">Help Translate</a>
          <a class="item" href="https://github.com/Semantic-Org/Semantic-UI/issues" target="_blank">Submit an Issue</a>
          <a class="item" href="https://gitter.im/Semantic-Org/Semantic-UI" target="_blank">Join our Chat</a>
          <a class="item" href="/cla.html" target="_blank">CLA</a>
        </div>
      </div>
      <div class="three wide column">
        <h4 class="ui header">Network</h4>
        <div class="ui link list">
          <a class="item" href="https://github.com/Semantic-Org/Semantic-UI" target="_blank">GitHub Repo</a>
          <a class="item" href="http://forums.semantic-ui.com" target="_blank">User Forums</a>
          <a class="item" href="http://1.semantic-ui.com">1.x Docs</a>
          <a class="item" href="http://legacy.semantic-ui.com">0.x Docs</a>
        </div>
      </div>
      <div class="seven wide right floated column">
        <h4 class="ui header">Help Preserve This Project</h4>
        <p> Support for the continued development of Semantic UI comes directly from the community.</p>
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
          <input type="hidden" name="cmd" value="_s-xclick">
          <input type="hidden" name="hosted_button_id" value="7ZAF2Q8DBZAQL">
          <button type="submit" class="ui large teal button">Donate Today</button>
        </form>
      </div>
    </div>
    <div class="ui section divider"></div>
    <img src="/images/logo.png" class="ui centered mini image">
    <div class="ui horizontal small divided link list">
      <a class="item" href="http://semantic-ui.mit-license.org/" target="_blank">Free & Open Source (MIT)</a>
    </div>
  </div>
</div>

      </div>
    </div>
  </div>
  <div class="ui basic language modal">
  <i class="close icon"></i>
  <div class="header">The <span class="name"></span> Translation Needs Your Help</div>
  <div class="image content">
    <div class="middle aligned image">
      <i class="world icon"></i>
    </div>
    <div class="description">
      <p>This translation is only <b><span class="complete"></span>%</b> complete!</p>
      <div class="ui inverted indicating progress">
        <div class="bar"></div>
      </div>
      <p>We need your help to make Semantic available to  people who speak your language.</p>
      <p>Our translation tools are easy to use and allow you to translate text without having to leave the site.
      </p>
    </div>
  </div>
  <div class="actions">
    <div class="ui inverted cancel button">No Thanks</div>
    <a href="https://github.com/Semantic-Org/Semantic-UI/wiki/Translating-Semantic-UI-Docs" target="_blank" class="ui inverted approve teal button">
      <i class="mail icon"></i>
      Help Translate
    </a>
  </div>
</div>

<div class="ui basic chinese modal">
  <i class="close icon"></i>
  <div class="header">Would you like to visit the mirror site?</div>
  <div class="image content">
    <div class="middle aligned image">
      <i class="question icon"></i>
    </div>
    <div class="description">
      <p>Semantic is available at <a href="http://www.semantic-ui.cn">semantic-ui.cn</a> a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.
      </p>
    </div>
  </div>
  <div class="actions">
    <div class="ui inverted red cancel button">No Thanks</div>
    <a href="http://www.semantic-ui.cn" class="ui inverted green approve button">
      <i class="mail icon"></i>
      Yes, take me to the mirror
    </a>
  </div>
</div>
  <div class="ui demo page dimmer">
  <div class="content">
    <div class="center">
      <h2 class="ui inverted icon header">
        <i class="mail icon"></i>
        Dimmer Message
        <div class="sub header">Dimmer sub-header</div>
      </h2>
    </div>
  </div>
</div>
  <script>
window.less = {
  async        : true,
  environment  : 'production',
  fileAsync    : false,
  onReady      : false,
  useFileCache : true
};
</script>

<script src="/javascript/library/less.min.js"></script>


</body>
</html>
